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

Orange offre la 5G à tous ses clients pour l’été

21:30

• 8


L’iPhone 17 Air aurait droit à la couleur Sky Blue en exclusivité

21:00

• 11


Une troisième bêta développeurs pour iOS 18.6

20:00

• 8


Un coloris orange cuivré pour l’iPhone 17 Pro ?

16:35

• 21


ChromeOS va bientôt fusionner avec Android

14:50

• 14


iPhone 17 : la production d’essai démarre en Inde, une étape clé

12:06

• 4


Faute de nouveau Siri, le premier écran connecté d’Apple n’arriverait finalement qu’en 2026

09:41

• 25


Une station de chargement et de rangement en bois pour tous vos terminaux !

09:06

• 0


Entre dérives, intégration dans les Tesla et nouvelle version, la semaine agitée de Grok et xAI

13/07/2025 à 14:03

• 41


Comment l’iPhone a changé le journalisme de terrain chez M6

13/07/2025 à 10:00

• 42


Sortie de veille : après le départ du n°2 d’Apple, Tim Cook est-il le prochain sur la liste ?

12/07/2025 à 10:44

• 57


Apple serait en pole position pour diffuser la F1 aux États-Unis avec une offre à 150 millions de dollars 🆕

12/07/2025 à 07:56

• 40


Prime Day : les derniers bons plans pour équiper sa maison en domotique

11/07/2025 à 20:50

• 14


La Chine s'attaque aux batteries externes de mauvaise qualité, ce qui cause des remous chez les fabricants

11/07/2025 à 20:15

• 45


Les produits Wemo de Belkin sont poussés à la retraite sauf s'ils utilisent HomeKit

11/07/2025 à 19:30

• 11


Prime Day : découvrez les joies de DockKit avec de belles promotions

11/07/2025 à 16:45

• 0