Les pixels de l’iPhone 5
Cela fait quelques temps que l’iPhone 5 est sorti et il va sérieusement falloir commencer à en tenir compte dans nos intégrations web, de manière générale.
Forcément, pour nous faciliter le travail, Apple a décidé de changer sa résolution par rapport à ses ancêtres. Et tant qu’à faire, uniquement dans le sens de la hauteur.
En clair, l’iPhone 5 a une définition de 640x1136 pixels tandis que son prédécesseur en fait 640x960 pixels.
Mais ce n’est pas tout, voici les dimensions complètes, en pixels réels, “pixels CSS”, “faux pixels” et tutti quanti :
Largeur de l’iPhone 5 :
- largeur en “pixels réels” : 640px
- screen.width (JavaScript) : 320px
- device-width : 320px
- viewport (Safari) : 980px
Hauteur de l’iPhone 5 :
- hauteur en “pixels réels” : 1136px
- screen.height (JavaScript) : 568px
- device-height : 568px
- viewport (Safari) : 1090px
Comment le détecter ?
- En JavaScript, avec window.screen.height==568
- En CSS, avec les Media Queries : @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {…}
- Via User-Agent : … non mais en fait je ne préfère pas, c’est pas bien.
EDIT : Attention, ce billet n’est pas une incitation à traiter chaque terminal différemment. Il est bien entendu conseillé d’éviter de cibler les mobiles au cas par cas mais dans leur généralité. Il me semblait cependant intéressant de connaître (et partager) les valeurs précises de l’iPhone 5, au-moins pour notre culture générale :)
En quoi c’est intéressant ? (et problématique)
Mine de rien, le device-height de l’iPhone 5 va certainement causer plus de soucis que prévu pour les intégrateurs fans de Responsive Web Design en raison de sa valeur bien supérieure à son prédécesseur.
En effet, la convention qui est de fixer la valeur de Viewport à width=device-width va devenir très problématique en orientation paysage puisque le viewport fera 320px (device-width) dans une surface de 568px (device-height), soit un rapport de zoom global de page de +44% en paysage !
Encore un argument pour dire adieu à width=device-width ?
La preuve en images, avec quelques tests…
1- alsacreations.com (width=device-width) en portrait / paysage sur iPhone5 :
2- alsacreations.fr (width=device-width) en portrait / paysage sur iPhone5 :
3- knacss.com (initial-scale uniquement) en portrait / paysage sur iPhone5 :
