Corriger Requête de support pour l'IPad Pro

J'ai ces deux, mais ils ne sont pas de travail. Je suis de simulation 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 je supprimer " et (orientation paysage)", puis le css, il travaille à la première requête de média.
Qu'est-ce que le bon sens, pour à la fois paysage et portrait ?

Le HTML meta est défini 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" />
  • Votre question n'est pas claire. Veuillez être précis avec ce que vous voulez atteindre.
  • Me semble clair: à la Fois Portrait et Paysage CSS ne sont pas être invoquée sur IPad Pro. Et si je supprime l'orientation qu'ils travaillent
  • J'ai été confronté à un problème similaire. celui-ci vraiment m'a aidé.
  • Merci, j'ai reçu une masse de CSS (je ne suis pas une INTERFACE utilisateur graphique guy). Je vais essayer de convertir le .scss à partir de votre lien. Il semble y avoir un problème général d'orientation dans le CSS. J'ai des problèmes avec les Galaxy Tabs de ne pas décrocher de l'orientation.
InformationsquelleAutor Rory | 2017-02-01
  1. 36
    /* ----------- 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 sur Chrome simulateur.

    • Attention également tester le navigateur Safari Mobile de course en écran partagé (qui provoque habituellement des problèmes si vous essayez de détecter les appareils!).
    InformationsquelleAutor nykon333
  2. 12
    /* 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)  {}

    Portrait médias requête pour l'iPad Pro devrait être fine comme elle est.

    Paysage requête de support pour l'iPad Pro (min-device-width) doit être 1366px et (max device-width) doit être 1024px.

    Espère que cette aide.

    • quand j'ai essayé sur google chrome simulateur pour "ipad pro" ce dosn fonctionne pas pour moi
    • si vous retirez le "seul" et l'utilisation "min-width" au lieu de "min-device-width" n'est pas dans chrome?
    • c'est la bonne réponse
    InformationsquelleAutor Daniel T.
  3. 4

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

}
    InformationsquelleAutor STrunkett
  4. 2

    Remarque qu'il y a plusieurs iPad Pros, chacun avec différentes Fenêtres: Lorsque l'émulation d'un iPad Pro via les outils de développement Chrome, l'iPad Pro (12.9") est l'option par défaut. Si vous souhaitez émuler l'une de l'autre iPad Pros (10.5", ou de 9,7") par une autre fenêtre, vous aurez besoin d'ajouter un périphérique émulé avec les spécifications de corriger.

    Vous pouvez rechercher les appareils, fenêtres et leurs cadres CSS media queries à: http://vizdevices.yesviz.com/devices.php.

    Par exemple, la iPad Pro (12.9") seraient les suivantes requêtes de média:

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

    Alors que la 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... */ }
    InformationsquelleAutor Jubal Lindsey
  5. 0

    J'ai essayé plusieurs propositions de réponses mais le problème est que les requêtes de média en conflit avec d'autres requêtes, et au lieu d'afficher le mobile CSS sur l'iPad Pro, il a été d'afficher le bureau CSS. Ainsi, au lieu de l'aide de max et min pour les dimensions, j'ai utilisé le VALEURS EXACTES et cela fonctionne parce que sur l'iPad pro, vous ne pouvez pas redimensionner le navigateur.

    Noter que j'ai ajouté une requête pour mobile CSS que j'utilise pour les appareils avec moins de 900px largeur; n'hésitez pas à le retirer si nécessaire.

    C'est de la requête, il combine à la fois paysage et portrait, il travaille pour la 12.9" et si vous avez besoin de cibler les 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    
}
    InformationsquelleAutor frenchie
  6. 0

    Pour ceux qui veulent cibler un iPad Pro 11" le device-width est 834px, device-height est 1194px et la device-pixel-ratio est 2. Source: screen.width, screen.height et devicePixelRatio rapporté par Safari sur iOS Simulator.

    Exacte media query pour le portrait: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)

    InformationsquelleAutor salomvary