web-dev-qa-db-fra.com

Requête de média correcte pour IPad Pro

J'ai ces deux mais ils ne travaillent pas. Je simule dans 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 je supprime 'et (orientation: paysage)', alors le css dedans fonctionne dans la première requête de média . Quelle est la bonne orientation, pour le paysage et le portrait?

La méta HTML est définie comme

  <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" />
cssipad
18
Rory
/* ----------- 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) {

}

Je n'ai pas d'iPad Pro, mais cela fonctionne pour moi dans le simulateur Chrome.

28
nykon333
/* 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 requête de médias Portrait pour iPad Pro devrait être comme elle est.

La requête multimédia Paysage pour iPad Pro (largeur minimale de périphérique) doit être de 1366px et (largeur maximale de périphérique) de - 1024px .

J'espère que cela t'aides.

8
Daniel T.

Cela a fonctionné pour moi

/* 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)
 {

}
2
STrunkett

Notez qu'il existe plusieurs iPad pros, chacun avec des fenêtres différentes: Lorsque vous émulez un iPad Pro via les outils de développement Chrome, iPad Pro (12.9 ") est l'option par défaut. Si vous souhaitez émuler l'un des autres iPad Pro (10.5 "ou 9.7") avec une fenêtre d'affichage différente, vous devrez ajouter un périphérique émulé personnalisé avec les spécifications appropriées. 

Vous pouvez rechercher des périphériques, des fenêtres d’affichage et leurs requêtes multimédia CSS respectives à l’adresse: http://vizdevices.yesviz.com/devices.php .

Par exemple, iPad Pro (12.9 ") aurait les requêtes multimédia suivantes:

/* 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... */ }

Considérant que le iPad Pro (10.5 ") aura:

/* 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... */ }
1
Jubal Lindsey

J'ai essayé plusieurs des réponses proposées, mais le problème est que les requêtes multimédias étaient en conflit avec d'autres requêtes et qu'au lieu d'afficher le CSS mobile sur l'iPad Pro, il affichait le CSS de bureau. Ainsi, au lieu d'utiliser max et min pour les dimensions, j'ai utilisé EXACT VALUES et cela fonctionne car sur l'iPad pro, vous ne pouvez pas redimensionner le navigateur. 

Notez que j'ai ajouté une requête pour les CSS mobiles que j'utilise pour les appareils dont la largeur est inférieure à 900 pixels. n'hésitez pas à l'enlever si nécessaire.

C’est la requête, elle combine paysage et portrait, elle fonctionne pour le 12.9 "et si vous avez besoin de cibler le 10.5", vous pouvez simplement ajouter les requêtes pour ces dimensions:

@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    
}
0
frenchie