1

¿Cómo puedo calcular el media query correcto para una resolución?

Por ejemplo, si tengo un dispositivo con una resolución de pantalla de 1080X1920 ¿Qué media query debería utilizar?

@media(max-width: 1080px){
  // No funciona
}

Leí que los media queries funcionan por aspect ratio y densidad de pixeles, pero no sé como calcular esta información para poder utilizar un media query en CSS.

Por ejemplo, el iPhone 6+ tiene una resolución de pantalla de 1920 x 1080, pero entra en el media query de 414px

@media(max-width: 414px) {
  // Este código CSS funciona en iPhone 6+
}

¿Hay alguna herramienta o manera de saber el media query correcto?

akko
  • 2,378
  • 2
  • 27
  • 56
  • Que es lo que quieres hacer que cuando sea el ancho menor a `1080` o mayor? o te refieres al alto – Luis Daniel Rovira Contreras Dec 19 '17 at 23:16
  • Aplicarle algún estilo específico. Tengo un teléfono con esas características que no me carga los media queries. – akko Dec 19 '17 at 23:21
  • Revisa la respuesta que puse a ver si te ayuda saludos – Luis Daniel Rovira Contreras Dec 19 '17 at 23:28
  • 4
    Posible duplicado de [CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?](https://es.stackoverflow.com/questions/50786/css-qu%c3%a9-son-los-media-queries-para-qu%c3%a9-sirven-c%c3%b3mo-se-agrupan-y-c%c3%b3mo-impleme) – Bender Paisa Dec 20 '17 at 00:54
  • 1
    El caso del iPhone 6 Plus es algo especial, porque aunque el tamaño físico es de 1920x1080, el display virtual tiene unas dimensiones de 2208×1242. Y su pixel ratio en CSS es de 3, por eso se le aplica el media query de 414px (414 * 3 = 1242). – Alvaro Montoro Dec 20 '17 at 02:21
  • Te dejo unas referencias [Viewport Sizes](http://viewportsizes.com/) y [CSS-Tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/). – azeós Dec 20 '17 at 02:59

2 Answers2

-1

NOTA: Agregar en el html el viewport esto hace que funcione el responsive. 

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Diseñando Plantillas Responsivas para el iPhone 6 & 6 Plus

Designing Responsive Emails For The iPhone 6 & 6 Plus Aunque el nuevo iPhone 6 y 6 Plus vienen con una innovación tecnológica, es una vergüenza que haya una imagen incrustada en la mente de cada amante o aborrecedor de iPhone: El primer comprador del iPhone 6 estaba parado afuera de la Tienda Apple de Nueva York, tratando de abrir su nuevo celular y siendo entrevistado por la prensa, al abrir la caja, se le cae el iPhone en frente de las cámaras. En realidad este momento bochornoso se convirtió en parte de una gran publicidad para el iPhone 6, así que este lanzamiento del nuevo dispositivo, nos ha enseñado a los email marketers una gran lección no sólo que tenemos que tener cuidado al abrir la caja cuando lo destapemos, también Apple ha re escrito sus reglas de resolución nuevamente.

Si usted pensó que la Retina era suficiente, aquí está la Retina HD

Justo cuando pensaba que estaba satisfecho con lo establecido que nos ha presentado la apariencia de resolución de la Retina de Apple y que sus emails se vieran maravillosamente en cada dispositivo iOS, los compañeros de Apple han decidido que han ido muy lejos con esto así que decidieron corregir las cosas. El iPhone 6 tiene una pantalla que mide 4.7 pulgadas y cuenta con 750 X 1334 pixeles lo que provee el iPhone 5s. No hay tantas buenas noticias en ese caso, pero hay un gran aliado que es el iPhone 6 Plus, por cierto bastante grande con 5.5 pulgadas de pantalla con 1080 X 1920 de resolución con 401 dpi para una gran experiencia de “Alta definición Total” conocida como Retina HD.

Es extraño pero cuenta con nueva figura de pixeles

Es obvio que Apple quiere castigar a los que lo retan ofreciéndolo en sus Androids como ventana gráfica en su dispositivo de ancho en pixeles CSS para el iPhone 6 es 375 mientras un tamaño parecido en dispositivo Android es de 360. Algo similar nos trae el iPhone 6 Plus, el dispositivo de ancho es de 414 vs. Android de 400. Solamente 14 o 15 pixeles de diferencia no podría sonar mucho pero es un nivel extra de complejidad a la hora de racionalizar su pantalla en su iPhone de lo que esta recibiendo en Android. Si eso no fue muy confuso para usted, el iPhone 6 Plus trae una versión diferente para los desarrolladores de Apps e email marketers al sobresalir con su 1080 X 1920 de su tamaño predeterminado de sus figuras de pixeles con 1242 X 2208 pixeles ya que disminuye la resolución a 1.15 por lo que cada 23 pixeles se resigna a 20 pixeles. ¿Le está dando dolor de cabeza?

Iconos ahora son 60 pixeles más grandes

El tamaño del icono en el iPhone 6 ha sido resaltado de esa manera, así no tendrá que utilizar un microscopio para leerlo, los nuevos iconos son resaltados desde iPhone 4 y 5 teniendo 120 X 120 px y el nuevo subiéndolo a 180 X 180 px :

Atributos para mantener a sus clientes de iPhone 6 contentos

Dése cuenta que existen muchísimos otros atributos provechosos que querrá implementar a la hora de proveer una muy buena experiencia en sus pantallas:

  • Media query: Pantalla
  • Monocromático: falso
  • Color: verdadero
  • Ancho en pixeles: 414 px
  • Alto en pixeles: 628 px
  • Ancho de dispositivo en px: 414 px //Esta es la medida a usar
  • Alto de dispositivo en px: 736 px //Esta es la medida a usar
  • Mínimo de ancho del dispositivo en pulgadas: 4 pulgadas
  • Mínimo de alto del dispositivo en pulgadas: 7 pulgadas*
  • Mínimo de ancho del dispositivo en centímetros: 10 cm
  • Mínimo de alto del dispositivo en centímetros: 19 cm
  • Orientación: retrato
  • Aspecto de ratio: no compatible/fuera de rango
  • Aspecto de ratio de dispositivo: 9 / 16
  • Resolución en dpi: no compatible
  • Resolución en dp px: no compatible
  • color: 8
  • -webkit-Ratio de pixeles: 3

Fuente:www.benchmarkemail.com

Luis Daniel Rovira Contreras
  • 2,636
  • 3
  • 12
  • 27
-1

Pruebe con:

@media screen and (max-width: 1080px) {

}

Y Estos son los media query que uso para un sitio responsivo, son basados a en las clases de bootstrap

/* responsive xs */
@media screen and (min-width: 1px) and (max-width: 767px) {

}
/* responsive sm */
@media screen and (min-width: 768px) and (max-width: 991px) {

}
/* responsive md */
@media screen and (min-width: 992px) and (max-width: 1199px) {

}
/* responsive lg */
@media screen and (min-width: 1200px) {

}
Michael
  • 793
  • 4
  • 11