Requête multimédia CSS iPhone 5

L'iPhone 5 a un écran plus long et il ne capte pas la vue mobile de mon site Web. Quelles sont les nouvelles requêtes de conception réactive pour l'iPhone 5 et puis-je les combiner avec les requêtes iPhone existantes?

Ma requête média actuelle est la suivante:

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

Une autre fonctionnalité multimédia utile est device-aspect-ratio.

Notez que l' iPhone 5 n'a pas de rapport hauteur / largeur 16: 9 . C'est en fait 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iphone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Référence:
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator

Il y a ceci, que je crédite à ce blog :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Gardez à l'esprit qu'il réagit à l'iPhone 5, pas à la version iOS particulière installée sur ledit appareil.

Pour fusionner avec votre version existante, vous devriez pouvoir les délimiter par des virgules:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Je n'ai pas testé le code ci-dessus, mais j'ai déjà testé des @mediarequêtes séparées par des virgules et elles fonctionnent très bien.

Notez que ce qui précède peut toucher certains autres appareils qui partagent des ratios similaires, tels que le Galaxy Nexus. Voici une méthode supplémentaire qui ciblera uniquement les appareils qui ont une dimension de 640px (560px en raison de certaines anomalies étranges de pixels d'affichage) et l'une d'entre 960px (iPhone <5) et 1136px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Toutes ces réponses listées ci-dessus, qui utilisent max-device-widthou max-device-heightpour les requêtes média, souffrent d'un bug très fort: elles ciblent également beaucoup d'autres appareils mobiles populaires (probablement indésirables et jamais testés, ou qui arriveront sur le marché à l'avenir).

Ces requêtes fonctionneront pour tout appareil doté d'un écran plus petit et votre conception sera probablement endommagée.

Combinée à des requêtes multimédias similaires spécifiques aux appareils (pour HTC, Samsung, IPod, Nexus ...), cette pratique lancera une bombe à retardement. Pour le débogage, cette idée peut faire de votre CSS un spagetti incontrôlé. Vous ne pouvez jamais tester tous les appareils possibles.

Veuillez noter que la seule requête multimédia ciblant toujours l'iPhone5 et rien d'autre , est:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Notez que la largeur et la hauteur exactes, et non la largeur maximale, sont vérifiées ici.

Maintenant, quelle est la solution? Si vous souhaitez écrire une page Web qui aura fière allure sur tous les appareils possibles, la meilleure pratique consiste à utiliser la dégradation

/ * motif de dégradation, nous vérifions la largeur de l'écran uniquement, cela changera en passant du portrait au paysage * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Si plus de 30% des visiteurs de votre site Web proviennent d'un mobile, inversez ce schéma, en proposant une approche axée sur le mobile. Utilisez min-device-widthdans ce cas. Cela accélérera le rendu des pages Web pour les navigateurs mobiles.

pour moi, la requête qui a fait le travail était:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 en mode portrait et paysage

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 en paysage

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 en portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Aucune des réponses ne fonctionne pour moi en ciblant une application phonegapp.

Comme le lien suivant pointe, la solution ci-dessous fonctionne.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Juste un ajout très rapide car j'ai testé quelques options et j'ai manqué cela en cours de route. Assurez-vous que votre page contient:

<meta name="viewport" content="initial-scale=1.0">

Vous pouvez obtenir votre réponse assez facilement pour l'iPhone5 avec d'autres smartphones dans la base de données des fonctionnalités multimédias pour les appareils mobiles:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Vous pouvez même obtenir vos propres valeurs d'appareil sur la page de test du même site Web.

(Avertissement: Ceci est mon site Web)

afaik no iPhone utilise un rapport de pixels de 1,5

iPhone 3G / 3GS: (-Rapport de pixels de l'appareil Web: 1) iPhone 4G / 4GS / 5G: (-Rapport de pixels de l'appareil-Web: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Vous devriez peut-être réduire le "-webkit-min-device-pixel-ratio" à 1,5 pour attraper tous les iPhones?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}