web-dev-qa-db-fra.com

Boilerplate HTML5: méta-fenêtre et width = device-width

Je construis un site Web adaptatif/réactif.

Concernant cette récente modification du HTML5BP:

" versions css mobile/iOS "

J'ai commencé à utiliser:

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

... et j'ai ceci dans mon CSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Quand initial-scale=1 était inclus, la rotation de vertical à horizontal (sur iPad/iPhone) faisait passer la disposition de 2 colonnes (par exemple) à 3 colonnes (en raison de requêtes meida, initial-scale=1 et correctif JS pour le bogue d'échelle de viewport ).

Pour résumer , en mode paysage, cela agrandit la page:

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

... et cela ne veut pas:

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

Remarque: Vous pouvez voir cet effet de zoom en action lorsque vous consultez le site Web HTML5BP sur iPad/iPhone.

Mes questions:

  1. Est-ce que cela devient la nouvelle norme (c.-à-d. Le zoom en mode paysage)?
  2. Je passe énormément de temps à expliquer ce changement à mes collègues et à mes chefs ... Ils sont habitués à voir une mise en page différente en mode horizontal; maintenant que la page effectue un zoom et que la mise en page reste la même (sauf que sa taille est plus grande). Des conseils sur la façon d'expliquer cela aux masses ignorantes (dont je pourrais être inclus)?

@robertc: Merci! C'est très utile.

J'aime réellement pas avoir le initial-scale=1; ce sont mes collègues qui sont habitués à voir le changement de disposition plutôt que le zoom. Je suis sûr que je serai forcé d'ajouter initial-scale=1 juste pour faire plaisir à tout le monde (parce que pas zoomer, et voir le changement de disposition, c'est ce qu'ils sont habitués à voir).

Je viens de remarquer le HTML5BP index.html sur github , et le site Web , utilisait <meta name="viewport" content="width=device-width">; pour moi, c'est une raison suffisante pour abandonner initial-scale=1, mais je me lève les sourcils quand j'essaie d'expliquer ces choses-là aux "non-geeks". :RÉ

html5viewporthtml5boilerplate
41
mhulse

Ce n'est pas une nouvelle norme, c'est la façon dont cela a toujours fonctionné, autant que je sache. Si vous définissez la largeur sur un nombre fixe de pixels, la rotation de portrait en paysage ne change que l'échelle, car le nombre de pixels virtuels reste constant. Je suppose que l'ajout de initial-scale=1 bloque la mise à l'échelle lorsque vous passez de l'un à l'autre - le facteur de mise à l'échelle de votre page ne change pas lorsque vous faites pivoter le périphérique. À quoi ressemble la page si vous la chargez initialement en mode paysage au lieu de portrait?

Je suggérerais que si vous voulez le comportement que vous obtenez lorsque vous spécifiez initial-scale=1, puis spécifiez initial-scale=1. BoilerPlate HTML5 est quelque chose que vous supposez modifier pour répondre à vos propres besoins.

22
robertc

Apple décrit [un peu] clairement le comportement de la fenêtre d'affichage ici .

Principalement, largeur de périphérique et hauteur de périphérique dans les périphériques iOS font référence aux dimensions de l'écran en mode portrait. Si vous définissez la largeur de la fenêtre d'affichage sur device-width, cela revient à définir une valeur constante . Par conséquent, lorsque la largeur physique de l'écran change avec un changement d'aspect, le navigateur étire la taille constante que vous avez entrée à la largeur de l'écran en mode paysage. . Ce comportement n'est ni faux ni correct, c'est juste.

Apple suggère width=device-width pour les applications adaptées à la plate-forme, il s’agit donc certainement de la méthode "Apple":

Si vous concevez une application Web spécialement pour iOS, la taille recommandée pour vos pages Web est la taille de la zone visible sur iOS. Apple vous recommande de définir la largeur sur la largeur du périphérique afin que l'échelle soit de 1,0 en orientation portrait et que la fenêtre d'affichage ne soit pas redimensionnée lorsque l'utilisateur passe en orientation paysage. la largeur du périphérique, mais est mis à l'échelle ou étiré pour une présentation adaptée à la largeur du paysage]

Personnellement, je préfère l’échelle initiale = 1.0 sans approche de réglage absolu de la largeur de l’appareil, car la fenêtre de visualisation remplit toujours l’écran de l’appareil sans l’étirer. Apple considère également ce balisage valide:

La figure 3-14 montre la même page Web lorsque l'échelle initiale est définie sur 1.0 sur iPhone. Safari sur iOS déduit la largeur et la hauteur pour adapter la page Web à la zone visible. La largeur de la fenêtre est définie sur largeur du périphérique en orientation portrait et hauteur du périphérique en orientation paysage.

11
trognanders

Pour ajouter une petite mise à jour: Ceci est toujours sous forme d'ébauche, mais c'est certainement quelque chose à examiner. A également une version préfixée pour le support de IE10). En utilisant CSS au lieu de HTML, vous évacuez beaucoup de confusion en appliquant le initial-scale:1; à zoom:1; et donnant min/max options pour width, height, & zoom lequel furter augmente la plage de réglage si elle est Champs obligatoires.

extend-to-zoom à la rescousse! ( http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo )

<meta name="viewport" content="initial-scale=1.0"> Se traduit par…

@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}
@-ms-viewport{
  width: extend-to-zoom; 
  zoom: 1.0;
}

tandis que <meta name="viewport" content="width:device-width,initial-scale=1.0"> Se traduit par…

@viewport{
  zoom: 1.0;
  width: device-width; /* = 100vw */
}
@-ms-viewport{
  width: device-width;
  zoom: 1.0;
}

Remarque: width:extend-to-zoom 100%; est égal à width:device-width;

http://dev.w3.org/csswg/css-device-adapt/

6
darcher

J'ai trouvé l'explication de la fenêtre d'affichage de Mozilla la plus détaillée et la plus utile. Voici un extrait:

La propriété width contrôle la taille de la fenêtre. Il peut être réglé sur un nombre spécifique de pixels comme width=600 ou à la valeur spéciale device-width value, qui correspond à la largeur de l'écran en pixels CSS à l'échelle 100%. (Il y a les correspondants height et device-height valeurs, qui peuvent être utiles pour les pages avec des éléments qui changent de taille ou de position en fonction de la hauteur de la fenêtre.)

Le initial-scale contrôle le niveau de zoom lors du premier chargement de la page. Le maximum-scale, minimum-scale, et user-scalable propriétés contrôlent la manière dont les utilisateurs sont autorisés à agrandir ou réduire la page

2
Justin

avez-vous essayé cela?

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