Requête multimédia sur l'iPhone 5 CSS

Question

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

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

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

Answer 1

Autre fonctionnalité de média est - device-aspect-ratio.

Notez que l' iPhone 5 n'a pas un aspect ratio 16:9. Il 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: 667/375) {}

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

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

Référence:
Les Requêtes de média @ W3C
Modèle d'iPhone de Comparaison
Le Ratio D'Aspect De La Calculatrice

Answer 2

Il est ce, que je de crédit à 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 il réagit seulement à l'iPhone 5 et de ne pas iOS 6.

À fusionner avec votre version existante, vous devriez être en mesure de virgules délimiter:

@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 je l'ai testé délimité par des virgules @media des requêtes avant, et ils fonctionnent très bien.

Notez que le ci-dessus peut frapper certains autres appareils qui partagent les mêmes ratios, tels que le Galaxy Nexus. Voici une méthode supplémentaire qui cible uniquement les périphériques qui ont une dimension de 640px (560 px en raison de certaines bizarre affichage de pixel anomalies) et l'un 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 */
}

Answer 3

Toutes ces réponses énumérés ci-dessus, que l'utilisation max-device-width ou max-device-height pour questions des médias, souffrent d'une très forte bug: ils visent beaucoup d'autres appareils mobiles populaires (probablement non désirées et de ne jamais testé, ou qui a frappé le marché à l'avenir).

Cette requêtes de travail pour n'importe quel appareil qui a un écran plus petit, et probablement votre conception sera brisé.

Combiné avec un appareil similaire spécifiques des requêtes de média (HTC, Samsung, IPod, Nexus...) cette pratique va lancer une bombe à retardement. Pour debigging, cette idée peut rendre votre CSS incontrôlée spagetti. Vous ne pouvez jamais tester tous les périphériques possibles.

S'il vous plaît être conscient que la seule requête des médias toujours de ciblage de 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 exacte de la largeur et de la hauteur, de ne pas max-width est vérifié ici.

---

Maintenant, quelle est la solution? Si vous voulez écrire une page web qui semblent bonnes sur tous les périphériques possibles, la meilleure pratique est pour vous l'utilisation de la dégradation

/* la dégradation modèle nous sommes à la vérification de la largeur de l'écran seulement bien sûr, ce qui changera, c'est le tournant du mode portrait au mode 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% de vos visiteurs de site web viennent de mobile, tournez à ce régime à l'envers, en fournissant mobiles-première approche. Utiliser min-device-width dans ce cas. Cela permettra d'accélérer la page web de rendu pour les navigateurs mobiles.

Answer 4

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)
 

Answer 5

Rien de la réponse fonctionne pour moi ciblant un phonegapp App.

Comme l’indique le suivant lien , la solution ci-dessous fonctionne.