web analytics

Guía de resoluciones efectivas CSS (o “viewport”) en smartphones, tablets, ordenadores especiales y otros dispositivos

No es lo mismo su resolución real que su resolución efectiva, que siempre será menor si su pantalla tiene una mayor densidad de pixeles (como las “pantallas Retina” de Apple). Les presento una guía comparando resoluciones efectivas con reales de cada uno de la mayoría de los dispositivos más populares. iOS, Android y Windows Phone. Entre otros. Una lista no definitiva y en constante actualización, en la que también puedes colaborar

por

 

ACTUALIZADA EL 12.07.2016
Ahora con los nuevos iPad Pro y el Nexus 6 y los dispositivos flagship de Samsung y LG. Esta es la primera de varias actualizaciones que voy a realizar a esta lista durante julio con la mayoría de los dispositivos más recientes y cotizados.

Antes de introducirla, debo explicar:

Qué NO ES esta guía.

La siguiente NO ES una comparativa entre las resoluciones reales entre diferentes dispositivos, buscando cual es la pantalla con más pixeles o mayor densidad de pixeles, o cual es la más larga, la de mejor calidad, la más brillante…

Si desea comprar una nueva tablet o smartphone, y necesita comparar entre varios equipos, mejor busque en otra parte. De entrada, le recomiendo GSMArena.com, donde podrá incluso comparar las características técnicas entre dos equipos que usted mismo defina.

Esta no es una guía de compra, es una guía referencial para diseñadores, maquetadores y diagramadores web. Y quizá también sirva para creadores de aplicaciones móviles, pero no estoy seguro.

Qué sí es esta guía: Una anarquía que no es tanto.

Llegaron las tablets y los smartphones y lo cambiaron todo, qué duda cabe. Y en la Web, el remezón fue enorme.

Adaptar una web a las dimensiones de un celular inteligente sería sencillo si todas las pantallas tuvieran la misma resolución en pixeles, pero desde principios de la década de 2010, que dejó de ser así.

El primer iPhone incluía una pantalla de 320 x 480 pixeles, que casi de inmediato se convirtió en el estándar de facto imitado por buena parte de sus primeros competidores con Android y otros sistemas operativos (¿Recuerdan la Palm Pre? También tenia 320 x 480)

Y la situación pudo seguir igual, pero llegaron Samsung, LG y otros fabricantes con celus con pantallas de mayor resolución de pixeles… y un concepto que hasta entonces no habíamos tomado en cuenta: mayor densidad de pixeles. Después apareció Apple y a esta misma idea le puso un nombre llamativo para que parezca que ellos la inventaron: Retina Display: su iPhone 4 tenía el doble de pixeles de ancho y alto que su predecesor, el 3GS, con el mismo tamaño de pantalla y con todos los elementos de su interfaz del mismo tamaño que en su modelo anterior, iconos, letras, botones…

Más allá de esa polémica, el concepto se consolidó. Y mientras en Apple la relación pixeles:densidad no cambiaría en absoluto hasta los modelos de 2014 (Los aparatos “Retina” fabricados desde el primero hasta 2013 tienen la misma, medida en pixeles por pulgada, ppi), en el ecosistema Android llegó una aparente anarquía total, con equipos con ppi y densidades de pixeles tan variadas entre sí que a simple vista, uno pensaría que diseñar una web que se vea perfecta en todos estos aparatos (o al menos los más populares) sería una señora locura.

Hasta que comparas la resolución de un aparato con su densidad de pixeles, y te das cuenta que la diferencia entre un dispositivo y otro… no es tanta.

huaweilg

Dos celulares (un LG y un Huawei) con pantallas muy diferentes mostrando la próxima versión de fernastro punto com. El de la izquierda tiene 320 pixeles de ancho. El de la derecha tiene 480, pero al tener una mayor densidad de pixeles (proporción 1.5 a 1) su navegador muestra la página como si en realidad tuviera los mismos 320 pixeles del LG.

Resolución CSS, La resolución efectiva

A falta de un mejor nombre, los desarrolladores web angloparlantes la llamaron CSS Resolution o Viewport Resolution: La resolución efectiva que se obtiene al comparar la resolución en real en pixeles con su densidad en pixeles. Ya que esta resolución efectiva, y no la real, es la que debe ser considerada al trabajar con las CSS, las hojas de estilo que definen el aspecto de cualquier web que visitas.

De esta forma, para diagramar una web para por ejemplo, un Samsung Galaxy S4, no tienes a tu disposición los 1080 pixeles de su resolución real, sino los 360 pixeles de su resolución efectiva, que se consigue al comparar la real con sus ppi.

En las siguientes tablas, muestro la resolución efectiva y la real de muchos dispositivos populares: Celulares inteligentes, tablets, y también consolas portátiles de videojuegos y los pocos ordenadores con densidades de pixeles mayores a la que sigue siendo el estándar en PC.

No es una lista definitiva y ustedes pueden ayudarme a hacerla crecer. Si tu dispositivo no está en alguna de estas listas, revisa las instrucciones al final de este mismo artículo, antes de los comentarios.

Ordenadores personales

Esto de las pantallas con mayor densidad de pixeles sigue siendo territorio exclusivo de los móviles y algunos tablets, en las computadoras solo Apple lo ha intentado, y en los MacBook Pro más recientes.

Mientras, todos los equipos con Windows siguen aferrados a este nuevo estándar en que se convirtió el 1366 x 768, con una relación entre proporción real a efectiva de 1 a 1. De hecho, desconozco si Windows 8 está preparado para pantallas con mayor densidad, y lo mismo con Ubuntu y elementary OS.

Como sea, aquí la tabla comparativa de los pocos compus que sí tienen pantallas con mayor densidad de pixeles, mencionando de paso algunos equipos que NO lo tienen.

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real:Efectiva
Apple Thunderbolt Display 2560 x 1440 2560 x 1440 1 a 1
MacBook Pro Retina 15” 1440 x 900 2880 x 1800 2 a 1
MacBook Air  (cualquier tamaño de pantalla) 1366 x 768 1366 x 768 1 a 1
La mayoría de notebooks que se venden con MS Windows 1366 x 768 1366 x 768 1 a 1
MacBook Pro Retina 13” 1280 x 800 2560 x 1600 2 a 1
MacBook Pro 13” normal 1280 x 800 1280 x 800 1 a 1

Tablets y consolas portátiles

1280 x 800. Esa es la resolución común en parte importante de las tabletas de 10 pulgadas que no son el iPad. No es 16:9, pero para los fabricantes del ecosistema Android les pareció un mejor radio de aspecto para adecuarse a los contenidos HD que el 4:3 del aparato de la manzana.

Y contrario a lo que uno podía creer, son pocas las tablets Android con pantallas de mayor densidad de pixeles y las que sí, básicamente multiplican los 1280 y los 800 por 2.

La lista de aparatos, de mayor resolución efectiva en pixeles de largo a la menor y por orden alfabético entre aparatos con la misma resolución efectiva de largo

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real:Efectiva
Samsung Galaxy View 1920 x 1080 1920 x 1080 1 a 1
iPad Pro de 12.9 pulgadas 1366 x 1024 2732 x 2048 2 a 1
Microsoft Surface RT 1366 x 768 1366 x 768 1 a 1
Acer Iconia Tab A200 1280 x 800 1280 x 800 1 a 1
Acer Iconia Tab A500 1280 x 800 1280 x 800 1 a 1
ASUS MeMo Pad 10 1280 x 800 1280 x 800 1 a 1
ASUS Transformer TF101 1280 x 800 1280 x 800 1 a 1
ASUS Transformer Pad TF300T 1280 x 800 1280 x 800 1 a 1
Google Nexus 10 1280 x 800 2560 x 1600 2 a 1
Lenovo IdeaTab S6000 1280 x 800 1280 x 800 1 a 1
Lenovo Yoga Tablet 10 1280 x 800 1280 x 800 1 a 1
Motorola XOOM 1280 x 800 1280 x 800 1 a 1
Motorola XOOM 2 1280 x 800 1280 x 800 1 a 1
Samsung Galaxy Note 10.1 1280 x 800 1280 x 800 1 a 1
Samsung Galaxy Note 10.1
(versión 2014 – P600)
1280 x 800 3560 x 1600 2 a 1
Samsung Galaxy Tab 10.1 1280 x 800 1280 x 800 1 a 1
Samsung Galaxy Tab 2 10.1 1280 x 800 1280 x 800 1 a 1
Samsung Galaxy Tab 3 10.1” 1280 x 800 1280 x 800 1 a 1
Samsung Galaxy Tab 8.9 1280 x 800 1280 x 800 1 a 1
SONY Tablet S 1280 x 800 1280 x 800 1 a 1
SONY XPERIA Tablet Z 1280 x 800 1920 x 1200 1.5 a 1
LG Optimus Pad 1280 x 768 1280 x 768 1 a 1
Microsoft Surface Pro 1280 x 720 1920 x 1080 1.5 a 1
Acer Iconia Tab A1-810 1024 x 768 1024 x 768 1 a 1
iPad Pro de 9.7 pulgadas 1024 x 768 2048 x 1536 2 a 1
iPad Air 1024 x 768 2048 x 1536 2 a 1
“Nuevo” Nuevo iPad con pantalla “Retina” (generación 4) 1024 x 768 2048 x 1536 2 a 1
El nuevo iPad (generación 3) 1024 x 768 2048 x 1536 2 a 1
iPad 2 y anteriores 1024 x 768 1024 x 768 1 a 1

Las tablets de 7 pulgadas

600 pixeles. Es el ancho preferido para la mayoría de las que no son el iPad mini, junto con un alto que puede ser o de 960 0 de 1024. Preferida tanto por el Nexus 7 como el Lenovo IdeaTab o hasta esos tablets genéricos que se venden muy baratos en las tiendas de informática. La densidad tampoco es un tema, recién el Nexus 7 y modelos nuevos de Samsung están ofreciendo pantallas con más pixeles por pulgada.

600 pixeles, la medida exacta hacia donde debes dirigir tu web si deseas que se revise con comodidad en un tablet de 7 pulgadas, como si estuvieran frente a un libro si se trata de una con mucho texto.

Aquí también incluyo las consolas. La PS VIta tiene una resolución cercana a este estándar para las tablets de 7 pulgadas y es de momento entre los sistemas dedicados para jugar con el que mejor se puede revisar la Web, que el navegador es WebKit. Y tiene juegos para enviciarse por horas, como lo demuestran mis 70 horas dedicadas al New Little King’s Story… lo siento, me salí del tema.

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real: Efectiva
PlayStation Vita 960 x 544 960 x 544 1 a 1
Acer Iconia Tab A100 800 x 1280 800 x 1280 1 a 1
Amazon Kindle Fire HD 8.9 800 x 1220 1600 x 2560 2 a 1
iPad Mini Generación 2 y 3 768 x 1024 1536 x 2048 2 a 1
iPad Mini Generación 1 768 x 1024 768 x 1024 1 a 1
Acer Iconia Tab A101 600 x 1024 600 x 1024 1 a 1
BlackBerry PlayBook 600 x 1024 600 x 1024 1 a 1
Lenovo IdeaTab A1000 600 x 1024 600 x 1024 1 a 1
Samsung Galaxy Tab 2 7.0 600 x 1024 600 x 1024 1 a 1
Samsung Galaxy Tab 3 7.0 (SM-T2100) 600 x 1024 600 x 1024 1 a 1
ASUS Fonepad 600 x 960 800 x 1280 1.4 a 1
Google / ASUS Nexus 7 600 x 960 800 x 1280 1.4 a 1
Google / ASUS Nexus 7 (modelo 2013) 600 x 960 1200 x 1920 2 a 1
Lenovo Yoga Tablet 8 600 x 960 800 x 1290 1.4 a 1
Samsung Galaxy Note 8.0 600 x 960 800 x 1280 1.4 a 1
Samsung Galaxy Tab 3 8.0 600 x 960 800 x 1280 1.4 a 1
Amazon Kindle Fire HD 533 x 800 800 x 1280 1.5 a 1
Nintendo 3DS (pantalla inferior)  320 x 240 320 x 240 1 a 1

Smartphones: ¿360 0 320 de ancho?

Llegamos a esa jungla que son los teléfonos inteligentes, cientos de aparatos con muchas resoluciones, tamaños de pantalla y densidades de pixeles. Que si los separamos por grupos a partir del ancho de su resolución efectiva, tan jungla y anarquía no era al final.

“El iPhone 6 tenía que tener más de 360, es Apple y tiene que distinguirse del resto”

En este primer grupo, los aparatos que se alejan de la norma que veremos en breve, los con un ancho mayor a 360 pixeles de resolución efectiva. Aquí están desde el Nexus 4 y el primer Optimus G a esa monstruosidad de teléfono que es que el Galaxy Grand.

Destaco en primer lugar, el caso del primer Galaxy Note. Te venden que tiene una resolución de 800 pixeles de ancho, pero debido a su densidad, en realidad el ancho efectivo es de la mitad, de 400 px.

Y en segundo lugar, los nuevos iPhones lanzados en 2014, el 6 y el 6 Plus. Que se alejaron de la barrera de los 360 pìxeles incluso en el iPhone 6 menos grande. (Momento troll) es que son Apple y tienen ir siempre a la suya, para decir que ellos inventaron los celulares con pantallas grandotas antes que el resto (Cierro momento troll).

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real: Efectiva
Sony Ericsson XPERIA Neo 480 x 854 480 x 854 1 a 1
Huawei Ascend Mate 480 x 813 720 x 1280 1.5 a 1
HTC Desire Z 480 x 800 480 x 800 1 a 1
Samsung Galaxy Grand (GT i9080L) 480 x 800 480 x 800 1 a 1
Sony Ericsson XPERIA Play 425 x 974 480 x 854 1,12 a 1
iPhone 6 Plus y 6S Plus 414 x 736 1080 x 1920 2.6 a 1
Google / Motorola Nexus 6 410 x 730 1080 x 1920 2.6 a 1
Samsung Galaxy Note 400 x 640 800 x 1280 2 a 1
LG Optimus G 384 x 640 768 x 1280 2 a 1
Google / LG Nexus 4 384 x 598 768 x 1280 2.1 a 1
iPhone 6 y 6S 375 x 677 750 x 1334 2 a 1

360 pixeles, el nuevo estándar de gama alta

Es que todos los celulares prémium lanzados en los últimos dos años, y que no son el iPhone, han apostado por este ancho. Y hasta podría decirse que por el mismo alto, 640 pixeles.

El Samsung Galaxy S4 (y el S5) podrá presumir de una pantalla más grande que el HTC One, pero ambos aparatos manejan la misma resolución efectiva al mostrar webs, y así otros celus con las mismas ínfulas.

En la parte baja de este grupo, equipos con menor alto, pero que siguen teniendo este mismo ancho efectivo. incluyendo esa revelación que se convirtió el Moto G.

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real:Efectiva
HTC One 360 x 640 1080 x 1920 3 a 1
HTC One Mini 360 x 640 720 x 1280 2 a 1
HTC One S 360 x 640 540 x 960 1.5 a 1
HTC One X 360 x 640 720 x 1280 2 a 1
HTC One X+ 360 x 640 720 x 1280 2 a 1
HTC One XL 360 x 640 720 x 1280 2 a 1
HTC Sensation XL 360 x 640 480 x 800 1.3 a 1
HTC Velocity 4G 360 x 640 540 x 960 1.5 a 1
LG Optimus L9 360 x 640 540 x 960 1.5 a 1
LG G5 y G5 SE 360 x 640 1440 x 2560 4 a 1
Motorola DROID Bionic 360 x 640 540 x 960 1.5 a 1
Motorola DROID RAZR 360 x 640 540 x 960 1.5 a 1
Motorola DROID RAZR MAXX 360 x 640 540 x 960 1.5 a 1
Samsung Galaxy Note 2 360 x 640 720 x 1280 2 a 1
Samsung Galaxy Note 3 360 x 640 1080 x 1920 3 a 1
Samsung Galaxy S3 360 x 640 720 x 1280 2 a 1
Samsung Galaxy S3 Mini 360 x 640 480 x 800 1,3 a 1
Samsung Galaxy S4 360 x 640 1080 x 1920 3 a 1
Samsung Galaxy S5 360 x 640 1080 x 1920 3 a 1
Samsung Galaxy S6 y S6 Edge 360 x 640 1440 x 2560 4 a 1
Samsung Galaxy S7 y S7 Edge 360 x 640 1440 x 2560 4 a 1
Samsung Galaxy S4 Mini 360 x 640 540 x 960 1.5 a 1
Samsung Galaxy S4 Zoom 360 x 640 540 x 960 1.5 a 1
SONY XPERIA Acro S 360 x 640 730 x 1280 2 a 1
SONY XPERIA P 360 x 640 540 x 960 1.5 a 1
SONY XPERIA S 360 x 640 720 x 1280 2 a 1
Xiaomi Mi3 360 x 640 1080 x 1920 3 a 1
Google / Samsung Galaxy Nexus 360 x 598 720 x 1280 2 a 1
Google / LG Nexus 5 360 x 598 1080 x 1920 3 a 1
Motorola DROID RAZR HD 360 x 598 720 x 1280 2 a 1
Motorola DROID RAZR M 360 x 598 540 x 960 1.5 a 1
Samsung Galaxy Camera 360 x 598 720 x 1280 2 a 1
SONY XPERIA V 360 x 598 720 x 1280 2 a 1
SONY XPERIA Z 360 x 598 720 x 1080 2 a 1
SONY XPERIA Z1 360 x 598 1080 x 1920 3 a 1
Motorola Moto G 360 x 594 720 x 1280 2.05_ a 1
LG G2 360 x 592 1080 x 1920 3 a 1
Motorola Droid 3 360 x 559 540 x 960 1.5 a 1

320 de ancho, pero en 16:9

Se consigue con los 320 x 533 pixeles, el segundo estándar en smartphones, este más utilizado por equipos de gama media y los más caros de hace dos años.

Aquí regresan los iPhones, con el 5 y su pantalla un poco más alta que sus predecesores, implementada sin mayores cambios en el 5C, el 5S y en el iPod touch de 5ta generación

Los que se alejan de esta norma aparecen al principio de esta tabla; celulares con pantallas un poco más altas, que a la hora de leer texto (y escribirlo) vaya qué cómodo llega a resultar.

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real:Efectiva
BlackBerry Z10 342 x 570 768 x 1280 2.3 a 1
Huawei Ascend G510 320 x 570 480 X 854 1.5 a 1
Motorola DEFY 320 x 569 480 x 854 1.5 a 1
Sony Ericsson XPERIA Arc 320 x 569 480 x 854 1.5 a 1
Sony Ericsson XPERIA X10 320 x 569 480 x 854 1.5 a 1
SONY XPERIA sola 320 x 569 480 x 854 1.5 a 1
SONY XPERIA U 320 x 569 480 x 854 1.5 a 1
iPhone SE 320 x 568 640 x 1136 2 a 1
iPhone 5, 5C y 5S 320 x 568 640 x 1136 2 a 1
iPod touch (5ta generación) 320 x 568 640 x 1136 2 a 1
Huawei U8860 Honor 320 x 544 480 x 854 1.5 a 1
Samsung Galaxy Core 2 320 x 534 480 x 800 1.5 a 1
Samsung Galaxy Win 320 x 534 480 x 800 1.5 a 1
Google / HTC Nexus One 320 x 533 480 x 800 1.5 a 1
Google / Samsung Nexus S 320 x 533 480 x 800 1.5 a 1
LG Optimus L7 320 x 533 480 x 800 1.5 a 1
HTC Desire 320 x 533 480 x 800 1.5 a 1
HTC Desire HD 320 x 533 480 x 800 1.5 a 1
HTC Desire S 320 x 533 480 x 800 1.5 a 1
HTC Desire X 320 x 533 480 x 800 1.5 a 1
HTC One SV 320 x 533 480 x 800 1.5 a 1
HTC One V 320 x 533 480 x 800 1.5 a 1
Huawei Ascend G512 (U8681) 320 x 533 480 x 800 1.5 a 1
Huawei Ascend Y300 320 x 533 480 x 800 1.5 a 1
LG Optimus Black 320 x 533 480 x 800 1.5 a 1
LG Optimus 2X 320 x 533 480 x 800 1.5 a 1
Samsung Galaxy S 320 x 533 480 x 800 1.5 a 1
Samsung Galaxy S2 320 x 533 480 x 800 1.5 a 1
Samsung Galaxy Ace 2 320 x 533 480 x 800 1.5 a 1

El estándar original: 320 x 480

Era la resolución del primer iPhone y aún hoy sigue siendo la de referencia en equipos de entrada, de gama media y una familia entera de celus que han metido mucho ruido en el último tiempo.

Me costó creerlo cuando lo noté, pero parece que todos los Nokia Lumia, esos dispositivos tan coloridos y llamativos con Windows Phone 8, no importa la resolución y tamaño de pantalla, tienen la misma resolución efectiva. Al momento de escribir esto no lo puedo confirmar en un 100% pero, ya saben, si me equivoco, me lo hacen notar en los comentarios.

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real:Efectiva
Alcatel OneTouch Fire (con Firefox OS) 320 x 480 320 x 480 1 a 1
HTC Desire C 320 x 480 320 x 480 1 a 1
HTC Titan II 320 x 480 480 x 800 1.5 a 1
HTC Wildfire S 320 x 480 320 x 480 1 a 1
Huawei Sonic U8650 320 x 480 320 x 480 1 a 1
iPhone 3GS y anteriores 320 x 480 640 x 960 2 a 1
iPhone 4 y 4S 320 x 480 640 x 960 2 a 1
iPod touch (3ra generación y anteriores) 320 x 480 320 x 480 1 a 1
iPod touch (4ta generación) 320 x 480 640 x 960 2 a 1
LG Fireweb 320 x 480 320 x 480 2 a 1
LG Optimus Hub 320 x 480 320 x 480 1 a 1
LG Optimus L5 320 x 480 320 x 480 1 a 1
LG Optimus One 320 x 480 320 x 480 1 a 1
Motorola DEFY Mini 320 x 480 320 x 480 1
Nokia Lumia 520 320 x 480 480 x 800 1.5 a 1
Nokia Lumia 610 320 x 480 480 x 800 1.5 a 1
Nokia Lumia 710 320 x 480 480 x 800 1.5 a 1
Nokia Lumia 800 320 x 480 480 x 800 1.5 a 1
Nokia Lumia 820 320 x 480 480 x 800 1.5 a 1
Nokia Lumia 900 320 x 480 480 x 800 1.5 a 1
Nokia Lumia 920 320 x 480 768 x 1280 2.4 a 1
Nokia Lumia 1020 320 x 480 768 x 1280 2.4 a 1
Nokia Lumia 1520 320 x 480 1080 x 1920 3.4 a 1
Samsung Galaxy Ace 320 x 480 320 x 480 3.4 a 1
Samsung Galaxy Ace Plus 320 x 480 320 x 480 1 a 1
Samsung Galaxy Fame 320 x 480 320 x 480 1 a 1
Samsung Galaxy Mini 2 320 x 480 320 x 480 1 a 1
Samsung Galaxy Young 320 x 480 320 x 480 1 a 1
Sony Ericsson XPERIA Mini 320 x 480 320 x 480 1 a 1
Sony Ericsson XPERIA X8 320 x 480 320 x 480 1 a 1
SONY XPERIA E DUal 320 x 480 320 x 480 1 a 1
SONY XPERIA Tipo 320 x 480 320 x 480 1 a 1
T-Mobile G1
(el primer Android)
320 x 480 320 x 480 1 a 1
ZTE Open 320 x 480 320 x 480 1 a 1

Los (olvidados) mini-androides

Y si, hay equipos con menor resolución y con pantallas más pequeñas. 240 pixeles de ancho, con densidad mínima, es la norma en este caso.

Aunque una excepción que se escapa de un lado y de otro es el nuevo Moto E. 480 pixeles de alto, pero 270 de ancho, con una pantalla muy angosta que lo deja en un punto intermedio entre un equipo de gama muy baja y uno entrando a la gama media. No es lo único extraño en ese celular, pero ya es salirse del tema.

Conversando con el buen Marco González Luengo, me hizo notar lo olvidadas que están estas pantallas en quienes diseñan sitios adaptados para móviles, solo porque son los más baratos entre todos los Androides. Considerando que un buen diseño responsivo o adaptado para móvil debería ser agnóstico del tamaño de la pantalla de un dispositivo (que se trabajaba casi todo con porcentajes), esta situación no debería ocurrir.

Así que no, en esta guía no dejo fuera a estas humildes pantallas. En el diseño del próximo fernastro.com, tampoco estarán marginadas.

Dispositivo Resolución Efectiva para CSS Resolución Real (En pixeles) Proporción Real:Efectiva
Motorola Moto E 270 x 480 960 x 540 2 a 1
Samsung Galaxy Mini 240 x 400 240 x 400 1 a 1
LG Optimus L3 240 x 320 240 x 320 1 a 1
LG Optimus L3 II 240 x 320 240 x 320 1 a 1
Samsung Galaxy Y 240 x 320 240 x 320 1 a 1

Cómo aportar a esta lista con la resolución de tu equipo

Si tienes un equipo que no está en esta lista y quieres que lo agregue:

1. Ingresa con tu dispositivo al siguiente enlace.

2. Anota la resolución que indicará la página.

3. En los comentarios de este artículo, escribe la resolución que te entrega, indicando el equipo con el que realizaste la prueba.

Esta no es una guía definitiva. Constantemente por mi parte seguiré buscando nuevos tablets y teléfonos midiendo sus resoluciones para agregarlos a la misma, y así crezca este recurso, una guía de verdad útil para quienes deseamos diseñar en la nueva frontera de la Web: Los esmarfons y las tablés.

Y si les mareó tanto número, aquí una guía rápida resumiendo las resoluciones más comunes.

  • eckctor

    Mil gracias me ha servido y me servira de mucho!! saludos!

  • Carlos Diaz

    Muy bueno, me va ayudar muchisimo para mis diseños (eso espero). Yo me he encontrado con la problemática que en la vista diseñador de FireFox para iPad tanto en vertical como en horizontal, se ve bien y si cojes un iPad real, también se ve bien pero cuando me dirijo a las famosas web que ofrecen una visión de tu web en distintas resoluciones y equipos, la que corresponde a los iPad, no se ve bien y eso me trae de cabeza para probar que mi web se vea bien en cualquier dispositivo sin tenerlo físicamente.

    PD: en la ofi tengo una pantalla de 24” de samsung trabajando con Windows 8.1 a su máxima resolución (según windows) 1920×1080

  • Francisco rojas

    Buenisimo… Estoy en una tablet Lenovo de 7 pulgadas 1024×552 idea tablet PC A-1000

  • Pingback: Media Queries Efectivas, Según el dispositivo. | Heckctor.com()

  • Jasson

    Buenazo :)
    Falto mi Toshiba Qosmio :D 1920 x 1080

  • Horacio Javier Rippel

    Hola, muy bueno y claro el artículo. Tengo una consulta por si alguien lo sabe:
    Al probar un maquetado tengo que tener en cuenta la “Resolución Efectiva para CSS”? Por ejemplo, puedo probarlo en un S4 o un S4 Mini que va a ser lo mismo. La consulta la hago para poder reducir la cantidad de dispositivos en un cross device y abarcar la mayor cantidad de resoluciones posibles.
    Gracias

    • Fernando De León

      Es igual, son de 480 para abajo.

  • David Vergara

    Huawei P7 -> 360 X 640

  • Damian Alberto

    Huawei G300 480 x 800

  • Fernando De León

    Huawei p8 lite 360×592

  • Pingback: Guía Rápida de anchos de pantalla para diseño web en smartphones y tablets » (No copypaste de) Tecnología » fernastro.com G8()

  • Eric Alonso Desclos

    Esta es la página que más miro cuanto tengo que hacer una web. Gran recopilación! Sería de agradecer que la actualicen pues creo que la resolución de 480×800 se ha vuelto un estandar en móviles / celulares grandes de 5″ que es tamaño que ahora compra la mayoría de la gente.

  • Eric Alonso Desclos

    Tengo el Samsung Galaxy S3 Mini y de resolución efectiva para css tiene 320px de ancho. Le tienen puesto 360, esta mal.

  • TavoQiqe

    ¿Alguien sabe la resolución efectiva del Samsung Galaxy Note 4? Me ayudarían mucho si me lo dicen.

  • Maleja López

    HUAWEI P8 360×640

  • Jose Cabrera

    Motorola X Play 360×640

  • Davo

    LG G4 360×640

  • P8 lite 360×640