Necesito a alguien que me ayude a aclarar mi comprensión sobre el tamaño de píxeles en teléfonos nuevos con pantallas de alta densidad. Desde entonces, está lanzando una bola curva en mi diseño web.Diseño web para teléfonos inteligentes: tamaño de píxel
Mi comprensión inicial sobre los teléfonos inteligentes era que el tamaño del píxel era aproximadamente 480 x 320, lo que facilitaba el diseño, ya que los píxeles seguían siendo los mismos píxeles.
Sin embargo, algunos teléfonos inteligentes son dobles (o más) que este. Creo que el iPhone es realmente el doble en 960 x 640. Mi Galaxy Nexus es 1280 x 720.
Ahora, esto funciona bien cuando se usa%. Sin embargo, hay muchas cosas que quería usar para fijar los valores de píxel. Por ejemplo, muchos valores de altura no necesitan estar en% s. Además, si la altura es fija, algunos elementos, como el logotipo, los íconos, algunas imágenes, no querrán que se estiren cuando el ancho se amplíe ... por lo que necesitarán un valor constante.
Sin embargo, ¿cómo puedo manejar esto cuando un píxel no es realmente una medición física consistente?
Es más fácil cuando se utiliza un ejemplo, por lo que si alguien podría explicarlo tomando, por ejemplo, iconos como ejemplo.
Cuando inicio sesión en Facebook en mi teléfono, veo esos tres iconos de notificación en la barra de navegación (solicitudes de amistad, mensajes y algo más). Estos son fijos Si tengo mi teléfono en posición vertical o de lado, se quedan exactamente del mismo tamaño. Lo único que cambia con el ancho es el espacio entre ... esencialmente para lo que estoy trabajando.
¿Cuál sería la medida en estos iconos? Por un lado, sé que el ícono estándar suele ser 16x16. Entonces, ¿necesitarían tener 32x32 en estos teléfonos inteligentes de alta densidad? Sin embargo, tampoco parecen tener el mismo tamaño que mis iconos de 16x16 que veo en mi escritorio. Parecen ser más 12x12 tal vez. Entonces, no estoy seguro, pero creo que hay un tamaño de ícono "estándar" diferente para teléfonos inteligentes y luego para computadoras de escritorio (¿qué sería?).
De todos modos, ya tengo CSS que identifica que un teléfono móvil se está utilizando para lograr mi diseño móvil. Sin embargo, ¿debo ir un paso más allá para reconocer la densidad de píxeles y luego ajustar mis valores fijos para que sean, en este caso, el doble? ¿O hay otra/mejor manera?
Se agradece toda la ayuda. Estoy un poco perplejo y no hay mucha información sobre esto. ¡Gracias y perdón por la larga publicación!
suena como el problema es la proporción de píxeles. Las pantallas Retina tienen una proporción de 2: 1 píxeles (un píxel en la retina es igual a 2 en una pantalla normal). Esto causaría que la resolución parezca que es el doble de lo que esperaba. Hay mucha discusión en curso sobre este tema, y estoy seguro de que puedes encontrar algunos artículos con un poco de búsqueda. –
Aquí hay un artículo que podría darle más información (hay muchos por ahí) http://menacingcloud.com/?c=highPixelDensityDisplays –