HTML : WebApp et iPhone 5

Le 30 novembre 2012 — par

J’ai découvert ce bug après avoir vu sur Twitter que mon application mobile BetaSeries ne prenait pas toute la hauteur de l’écran d’un iPhone 5. On pourrait penser que comme pour les applications iOS il s’agit uniquement d’ajouter un splash screen des dimensions adéquates, mais non.

Il s’agirait d’un bug de Safari qui passe le site en letterbox s’il voit le paramètre width=device-width ou alors un width inférieur ou égal à 320. Ceci est donc faux :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Et ceci vous affichera une taille correcte sur un iPhone 5 :

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

J’en profite pour vous donner les balises qui spécifient un splash screen différent selon la taille de l’écran :

<link rel="apple-touch-startup-image" href="/startup.png">
<link rel="apple-touch-startup-image" sizes="640x1096" href="/startup_iphone5.png">
S'abonner au flux RSS du blog
Recevoir les nouveaux articles par e-mail :