ios - queries - media query mobile iphone

Consultas de medios iPhone 6 y 6 Plus

Question

¿Alguien conoce tamaños de pantalla específicos para dirigir consultas de medios para iPhone 6 y 6 Plus?

Además, ¿los tamaños de los iconos y las pantallas de bienvenida?

Answer 1

iPhone X

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6+, 7+ y 8+

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6, 6S, 7 y 8

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

Fuente: Consultas de medios para dispositivos estándar

Answer 2

iphone 6

• Paisaje

  @media only screen 
      and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
      and (max-device-width : 667px) // or 41.6875em
      and (width : 667px) // or 41.6875em
      and (height : 375px) // or 23.4375em
      and (orientation : landscape) 
      and (color : 8)
      and (device-aspect-ratio : 375/667)
      and (aspect-ratio : 667/375)
      and (device-pixel-ratio : 2)
      and (-webkit-min-device-pixel-ratio : 2)
  { }

• Retrato

  @media only screen 
      and (min-device-width : 375px) // or 213.4375em
      and (max-device-width : 667px) // or 41.6875em
      and (width : 375px) // or 23.4375em
      and (height : 559px) // or 34.9375em
      and (orientation : portrait) 
      and (color : 8)
      and (device-aspect-ratio : 375/667)
      and (aspect-ratio : 375/559)
      and (device-pixel-ratio : 2)
      and (-webkit-min-device-pixel-ratio : 2)
  { }

  si lo prefiere, puede usar (device-width : 375px) y (device-height: 559px) en lugar de la configuración max- y max- .

  No es necesario utilizar todas estas configuraciones, y estas no son todas las configuraciones posibles. Estas son solo la mayoría de las opciones posibles para que pueda elegir las que satisfagan sus necesidades.

• Agente de usuario

  probado con mi iPhone 6 (modelo MG6G2LL / A) con iOS 9.0 (13A4305g)

  # Safari
  Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
  # Google Chrome
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
  # Mercury
  Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53

• Lanzar imágenes

  • 750 x 1334 (@ 2x) para retrato
  • 1334 x 750 (@ 2x) para paisaje

• Icono de la aplicación

  • 120 x 120

iPhone 6+

• Paisaje

  @media only screen 
      and (min-device-width : 414px) 
      and (max-device-width : 736px) 
      and (orientation : landscape) 
      and (-webkit-min-device-pixel-ratio : 3) 
  { }

• Retrato

  @media only screen 
      and (min-device-width : 414px) 
      and (max-device-width : 736px)
      and (device-width : 414px)
      and (device-height : 736px)
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio : 3) 
      and (-webkit-device-pixel-ratio : 3)
  { }

• Lanzar imágenes

  • 1242 x 2208 (@ 3x) para retrato
  • 2208 x 1242 (@ 3x) para paisaje

• Icono de la aplicación

  • 180 x 180

iPhone 6 y 6+

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Predicho

Según el sitio web de Apple, el iPhone 6 Plus tendrá 401 píxeles por pulgada y será 1920 x 1080. La versión más pequeña del iPhone 6 será 1334 x 750 con 326 PPI.

Entonces, suponiendo que la información sea correcta, podemos escribir una consulta de medios para el iPhone 6:

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

Tenga en cuenta que device-aspect-ratio quedará en desuso en http://dev.w3.org/csswg/mediaqueries-4/ y se reemplazará aspect-ratio

El ancho mínimo y el ancho máximo pueden ser algo así como 1704 x 960.

Apple Watch (especulativo)

Las especificaciones en el reloj todavía son un poco especulativas ya que (hasta donde yo sé) todavía no ha habido una hoja de especificaciones oficial. Pero Apple mencionó en este comunicado de prensa que el reloj estará disponible en dos tamaños ... 38 mm y 42 mm.

Suponiendo además ... que esos tamaños se refieren al tamaño de la pantalla en lugar del tamaño general de Watch, estas consultas de medios deberían funcionar ... Y estoy seguro de que podría dar o tomar unos pocos milímetros para cubrir cualquier escenario sin sacrificar ninguna orientación no deseada porque..

@media (!small) and (damn-small), (omfg) { }

o

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

Vale la pena señalar que Media Consultas Nivel 4 del W3C actualmente solo está disponible como un primer borrador público, una vez que esté disponible para su uso traerá consigo muchas características nuevas diseñadas con dispositivos portátiles más pequeños como este en mente.

Answer 3

Debe seleccionar el tamaño de la pantalla mediante la consulta de medios para diferentes tamaños de pantalla.

para iphone :

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

y para la versión de escritorio :

@media only screen (max-width: 1080){

}

Answer 4

Esto es lo que me está funcionando en este momento:

iphone 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) {

iPhone 6+

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)

Answer 5

Esto funciona para mí para el iphone 6

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}

Answer 6

Para iPhone 5

@media screen and (device-aspect-ratio: 40/71)

para iPhone 6,7,8

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

para iPhone 6 +, 7 +, 8 +

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

Trabajando bien para mí a partir de ahora.

Answer 7

Solo para que sepas que el iPhone 6 miente sobre su ancho mínimo. Se cree que es 320 en lugar de 375 se supone que es.

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}

Esto fue lo único que pude poner a trabajar para apuntar al iPhone 6. El 6+ funciona bien usando este método:

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}