Ouvrir le menu principal

iGeneration

Recherche

Adaptez vos webapps à l'iPhone 5

Anthony Nelzin-Santos

mercredi 26 septembre 2012 à 14:33 • 2

iPhone

Surprise : beaucoup de webapps ne sont pas adaptées à l'iPhone 5 et apparaissent « letterboxées » alors qu'elles s'affichent en plein écran dans Safari. Il faut en fait procéder à quelques modifications, et au passage en profiter pour s'adapter au nouveau ratio de l'écran.

À gauche, une webapp optimisée pour iPhone 5. À droite, une webapp « letterboxée » qui doit encore être mise à jour.

Remplir l'écran de l'iPhone 5

Beaucoup de développeurs web utilisent la balise suivante dans la définition de leur site comme une webapp pour iOS :

<meta name="viewport" content="initial-scale=1, width=device-width" />

Après avoir comparé plusieurs webapps sur iPhone 5, il semble que la déclaration de la largeur du viewport pose problème. Pour qu'une webapp s'adapte à la hauteur de l'écran de l'iPhone 5, il suffit tout simplement de supprimer cette déclaration :

<meta name="viewport" content="initial-scale=1" />

Apple n'a pas mis à jour sa documentation sur la question et ne fournit donc aucune explication.

Adapter une web-app à l'iPhone 5

Il vous faudra sans doute revoir quelques éléments pour adapter votre webapp au ratio 16:9 de l'iPhone 5. On pense d'abord et avant à l'image de lancement : après avoir créé une version 460x320 pixels pour les premiers iPhone, puis une version 920x640 pixels pour les iPhone Retina, il vous faudra désormais prévoir une version 1096x640 pixels. Les balises restent inchangées :

<link rel="apple-touch-startup-image" href="~/default.png" /> 
<link rel="apple-touch-startup-image" sizes="640x920"
href="~/default@2x.png" />
<link rel="apple-touch-startup-image" sizes="640x1096"
href="~/default-iphone5.png" />

Rejoignez le Club iGen

Soutenez le travail d'une rédaction indépendante.

Rejoignez la plus grande communauté Apple francophone !

S'abonner

Comment regarder les chaînes de télé sur l’Apple TV : toutes les apps et offres disponibles

11:55

• 64


« Digital detox » : le bilan de mes vacances (presque) sans iPhone

09:28

• 28


Panne majeure en cours sur les moyens de paiement de nombreuses banques françaises

30/08/2025 à 20:57

• 93


À contre-courant : pourquoi Florian n’abandonne pas WhatsApp

30/08/2025 à 14:07

• 77


Guide d'achat : quels accessoires pour accompagner son nouvel iPad à la rentrée

29/08/2025 à 23:00

• 16


iOS 18.6.2 bouche une faille zéro day utilisant WhatsApp pour piéger les utilisateurs

29/08/2025 à 22:00

• 8


Apple installe une boutique de produits sur Douyin, le TikTok chinois

29/08/2025 à 21:40

• 13


L’appel à la grève de la CB (et d’Apple Pay), un risque majeur pour les banques ?

29/08/2025 à 20:15

• 171


« Le premier iPad protégé contre les liquides » : la déclaration d’Apple qui intrigue

29/08/2025 à 18:48

• 15


Apple a cessé de signer iOS 18.6 et 18.6.1 🆕

29/08/2025 à 18:20

• 11


Canalys : un marché européen du smartphone morose malgré la bonne tenue des ventes d'iPhone 16

29/08/2025 à 18:18

• 7


Promo : l’iPhone 15 Plus à 749 € avec 100 € offerts en chèque cadeau

29/08/2025 à 15:27

• 6


Apple et Samsung unis contre les pubs comparatives et moqueuses de Xiaomi en Inde

29/08/2025 à 14:59

• 31


Opérateurs : Free est stable sur le mobile, SFR perd à nouveau des abonnés

29/08/2025 à 12:47

• 43


Aspirateurs-robots dans Apple Maison : attention à la gestion des pièces

29/08/2025 à 12:16

• 30


Après une mise en demeure de l’Arcom, cinq sites porno baisent les bras

29/08/2025 à 10:54

• 103