web-dev-qa-db-fra.com

Balise META Viewport pour les appareils iOS

Déclare

<meta name="viewport" content="width=device-width" />

avoir le même effet que de déclarer

<meta name="viewport" content="width=768" />

pour l'ipad?

19
pingu

Cela dépend en effet de l'orientation de l'appareil: la définition d'une valeur de pixel spécifique entraînera une mise à l'échelle de votre mise en page avec un facteur de 1,333 pour s'adapter à la largeur de l'appareil 1024px en mode paysage.

Réglage width=device-width d'autre part, n'augmentera rien, mais changera la largeur de la fenêtre d'affichage, pour laquelle vous pourrez ensuite créer une mise en page optimisée à l'aide de requêtes multimédias. Ou c'est du moins la théorie: l'iPad interprète en quelque sorte width=device-width comme 768px même en mode paysage. Afin d'obtenir la largeur réelle de l'appareil, vous devez ajouter initial-scale = 1.

Par conséquent, je ne suis pas d'accord avec la suggestion de James. Allez-y pour:

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

et gérer les différences de taille en utilisant des techniques de mise en page liquides/réactives.

40
andreasbovens