HTML5 Boilerplate: Meta viewport et width = width du périphérique

Je construis un site Web adaptatif / réactif.

En ce qui concerne ce changement récent au HTML5BP:

” Révisions CSS mobiles / iOS ”

J’ai commencé à utiliser:

 

… et j’ai ceci dans mon CSS:

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

Lorsque initial-scale=1 était incluse, la rotation de verticale à horizontale (sur iPad / iPhone) faisait passer la disposition de 2 colonnes (par exemple) à 3 colonnes (en raison des requêtes meida, initial-scale=1 et JS fix for). bogue à l’échelle de la fenêtre d’affichage ).

En résumé , en mode paysage, la page est agrandie:

  

… et cela ne veut pas:

  

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

Mes questions:

  1. Est-ce que cela devient le nouveau standard (zoom en mode paysage)?
  2. J’ai beaucoup de mal à expliquer ce changement à mes collègues et à mes patrons … Ils ont l’habitude de voir une mise en page différente en mode horizontal; maintenant que la page effectue un zoom et que la disposition rest la même (sauf qu’elle est plus grande). Des astuces pour expliquer cela aux masses ignorantes (dont je pourrais être inclus)?

@robertc: merci! C’est très utile.

J’aime vraiment ne pas avoir l’ initial-scale=1 ; Ce sont mes collègues qui ont l’habitude de voir la disposition changer plutôt que de zoomer. Je suis sûr que je serai obligé d’append initial-scale=1 juste pour plaire à tout le monde (parce qu’ils ne sont pas habitués à zoomer et à voir la disposition changer).

Je viens de remarquer que le fichier HTML5BP index.html sur github et le site Web utilisaient ; pour moi, c’est une raison suffisante pour abandonner initial-scale=1 , mais je m’énerve lorsque j’essaie d’expliquer ces choses aux “non-geeks”. :RÉ

Ce n’est pas une nouvelle norme, c’est la façon dont cela a toujours fonctionné. Si vous définissez la largeur sur un nombre fixe de pixels, la rotation du portrait en paysage modifie simplement l’échelle, car le nombre de pixels virtuels rest constant. J’imagine que l’ajout de la valeur initial-scale=1 bloque la mise à l’échelle lorsque vous passez d’un paramètre à l’autre – c’est-à-dire que le facteur de mise à l’échelle de votre page ne change pas lorsque le périphérique est pivoté. A quoi ressemble la page si vous la chargez initialement dans paysage au lieu de portrait?

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

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

Principalement, la largeur de l’appareil et la hauteur de l’appareil dans les appareils 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 à la largeur du périphérique, cela revient à la définir sur une valeur constante . Par conséquent, lorsque la largeur physique de l’écran change avec un changement d’aspect, le navigateur étend 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 le cas.

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écifiquement pour iOS, la taille recommandée pour vos pages Web est la taille de la zone visible sur iOS. Apple 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. [c’est à dire. La fenêtre conserve la largeur du périphérique portrait, mais elle est redimensionnée ou étirée 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 de largeur de périphérique absolue, car cela fait que la fenêtre remplit toujours l’écran de l’appareil sans é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 l’iPhone. Safari sur iOS déduit la largeur et la hauteur pour s’adapter à la page Web dans la zone visible. La largeur de la fenêtre d’affichage est définie sur la largeur du périphérique en orientation portrait et la hauteur du périphérique en orientation paysage.

Pour append une petite mise à jour: Ceci est toujours sous forme de brouillon, mais c’est certainement quelque chose à examiner. A également une version préfixée pour le support IE 10. En utilisant CSS au lieu de HTML, cela efface une grande partie de la confusion dont vous parlez en appliquant l’ initial-scale:1; pour zoom:1; et en donnant des options min / max pour la width , la height et le zoom ce qui augmente la plage de réglage si nécessaire.

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

traduit en…

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

où comme traduit en…

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

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

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

J’ai trouvé l’explication de la fenêtre 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 d’affichage. Il peut être défini sur un nombre spécifique de pixels comme width=600 ou sur la valeur de la largeur du périphérique, qui correspond à la largeur de l’écran en pixels CSS à une échelle de 100%. (Il existe des valeurs correspondantes de height et de height device-height , qui peuvent être utiles pour les pages dont les éléments changent de taille ou de position en fonction de la hauteur de la fenêtre.)

La propriété initial-scale contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés d’ maximum-scale , d’ maximum-scale minimum-scale et user-scalable l’utilisateur contrôlent la manière dont les utilisateurs sont autorisés à effectuer un zoom avant ou arrière sur la page.

as-tu essayé ça?