css - query - Corregir consulta de medios para IPad Pro

media screen css sizes

Question

Tengo estos dos pero no funcionan. Estoy simulando en Chrome

/* Landscape*/

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

    /* Portrait*/
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

Si elimino ''y (orientación: paisaje)'', entonces el css allí funciona en la primera consulta de medios. ¿Cuál es la orientación correcta, tanto para el paisaje como para el retrato?

El meta HTML se establece como

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

Answer 1

Esto funciono para mi

/* Portrait */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-width: 1112px) 
  and (max-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2)
 {

}

Answer 2

Para aquellos que desean apuntar a un iPad Pro 11 ", el device-width del device-width es de 834px, device-height es de 1194px y la device-pixel-ratio del device-pixel-ratio es 2. Fuente: screen.width , screen.height y devicePixelRatio informados por Safari en el simulador de iOS .

Consulta de medios exacta para retrato: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)

Answer 3

Probé varias de las respuestas propuestas, pero el problema es que las consultas de los medios entraron en conflicto con otras consultas y, en lugar de mostrar el CSS móvil en el iPad Pro, mostraba el CSS del escritorio. Así que en lugar de usar max y min para las dimensiones, utilicé los VALORES EXACTOS y funciona porque en el iPad pro no se puede cambiar el tamaño del navegador.

Tenga en cuenta que agregué una consulta para CSS móvil que uso para dispositivos con menos de 900 px de ancho; siéntase libre de eliminarlo si es necesario.

Esta es la consulta, combina paisaje y retrato, funciona para el 12.9 "y si necesita apuntar el 10.5", simplemente puede agregar las consultas para estas dimensiones:

@media only screen and (max-width: 900px), 
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape), 
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait)  {

     // insert mobile and iPad Pro 12.9" CSS here    
}

Answer 4

Tenga en cuenta que hay varios iPad Pros, cada uno con diferentes Viewports: al emular un iPad Pro a través de las herramientas de desarrollo de Chrome, el iPad Pro (12.9 ") es la opción predeterminada. Si desea emular uno de los otros iPad Pros (10.5 "o 9.7") con una vista diferente, deberá agregar un dispositivo emulado personalizado con las especificaciones correctas.

Puede buscar dispositivos, ventanas gráficas y sus respectivas consultas de medios de CSS en: http://vizdevices.yesviz.com/devices.php .

Por ejemplo, el iPad Pro (12.9 ") tendría las siguientes consultas de medios:

/* Landscape */ 
@media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }

Mientras que el iPad Pro (10.5 ") tendrá:

/* Landscape */ 
@media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }

Answer 5

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

No tengo un iPad Pro, pero esto me funciona en el simulador de Chrome.

Answer 6

/* Landscape*/

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

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

La consulta de medios digitales para iPad Pro debería estar bien como está.

La consulta de medios horizontal para iPad Pro (min-device-width) debe ser 1366px y (max device-width) debe ser 1024px .

Espero que esto ayude.