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

Question

Je suis en train de construire un adaptables/site web réactif.

Au sujet de cette modification récente de la HTML5BP:

"mobile/iOS css révisions"

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%;
}

Lors de l' initial-scale=1 a été inclus, la rotation de la verticale à l'horizontale (sur iPad/iPhone) a provoqué la mise en page à modifier à partir de 2 colonnes (par exemple) à 3 colonnes (en raison de meida requêtes, initial-scale=1 et JS correctif pour la fenêtre d'affichage de l'échelle de bug).

Pour résumer, quand en mode paysage, ce zoom de la page:

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

... et ce n'est pas:

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

Remarque: Vous pouvez voir cet effet de zoom en action lors de la visualisation de la HTML5BP site sur un iPad/iPhone.

Mes questions:

1. Est-ce devenu la nouvelle norme (par exemple, zoom en mode paysage)?
2. Je vais avoir un diable de temps à expliquer ce changement de mes collègues et patrons... Ils sont habitués à voir une mise en page différente en mode horizontal; maintenant que la page zoom et de la mise en page reste la même (sauf que c'est le plus grand). Des conseils sur la façon de l'expliquer à l'ignorance des masses (de qui, j'ai peut-être compris)?

---

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

En fait, j'aime pas avoir l' initial-scale=1; c'est mon co-travailleurs qui sont habitués à voir le changement de présentation plutôt que de zoom. Je suis sûr que je vais être forcé d'ajouter initial-scale=1 juste pour plaire à tout le monde (parce que pas de zoom, et de voir le changement de présentation, est-ce qu'ils sont habitués à voir).

Je viens de remarquer HTML5BP index.html sur github, et le site web, a été l'aide d' <meta name="viewport" content="width=device-width">; pour moi, c'est une bonne raison suffisante pour abandonner initial-scale=1, mais j'ai soulevé les sourcils quand j'essaie d'expliquer ces choses à la "non-geeks". :D

Answer 1

Ce n'est pas une nouvelle norme, c'est comment il a travaillé autant que je sache. Si vous définissez la largeur d'un nombre fixe de pixels, puis la rotation de portrait à paysage change juste l'échelle, parce que le nombre de pixels virtuels reste constante. Je suppose que l'ajout d' initial-scale=1 est le blocage de la mise à l'échelle que vous basculez entre - qui est le facteur d'échelle de votre page ne change pas lorsque l'appareil est en rotation. Que signifie l'apparence de la page, comme si vous chargez d'abord dans le paysage au lieu de portrait?

Je dirais que si vous voulez que le comportement que vous obtenez lorsque vous spécifiez initial-scale=1, puis spécifiez initial-scale=1. HTML5 BoilerPlate est quelque chose que vous êtes censé modifier pour l'adapter à vos propres exigences.

Answer 2

Apple [un peu], qui décrit clairement la fenêtre d'affichage du comportement ici.

Principalement, device-width et appareil-hauteur dans des appareils iOS, reportez-vous aux dimensions de l'écran en mode portrait. Si vous définissez la fenêtre d'affichage de la largeur de device-width, c'est le même que le paramètre à une valeur constante. Par conséquent, lorsque la largeur physique de l'écran change avec un aspect du changement, le navigateur s'étend de la constante de la taille que vous avez entré à la largeur de l'écran en mode paysage. Ce comportement est ni mal ni de droite, il est juste.

Apple suggère width=device-width pour les applications adaptées à la plate-forme, de sorte qu'il est certainement le "pommes" façon de faire:

Si vous êtes à la conception d'une application web spécialement pour iOS, puis le taille recommandée pour vos pages web est la taille de la zone visible sur iOS. Apple vous recommande de définir la largeur de device-width, de sorte que l'échelle est de 1,0 en orientation portrait et de la fenêtre d'affichage n'est pas redimensionnée lorsque l'utilisateur change de paysage. [ie. La fenêtre conserve portrait de l'appareil largeur, mais il est mis à l'échelle ou étirées pour la présentation d'adapter le paysage largeur]

Personnellement, je préfère le initial-scale=1.0 avec pas, dans l'absolu appareil-réglage de la largeur de l'approche, car elle rend la fenêtre d'affichage toujours remplir l'écran de l'appareil sans l'étirer. Apple considère que cela valide le balisage, ainsi:

La Figure 3-14 montre la même page web, lors de la première échelle est définie à 1.0 sur iPhone. Safari sur iOS en 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 réglé sur device-width en orientation portrait et de l'appareil-hauteur en orientation paysage.

Answer 3

Pour ajouter un peu de mise à jour: C'est encore sous forme de projet, mais il est certainement quelque chose à considérer. Dispose également d'un préfixe version pour IE support 10. En utilisant des CSS au lieu de HTML, il s'éclaircit un beaucoup de la confusion que vous parlez par l'application de l' initial-scale:1; de zoom:1; et donner des min/max des options pour l' width, height, & zoom qui furter augmente la portée de l'ajustement devrait-il être nécessaire.

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;
}

où qu' <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/

Answer 4

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

La largeur de la propriété contrôle la taille de la fenêtre d'affichage. Elle peut être définie à un certain nombre de pixels comme width=600 ou à la valeur spéciale device-width valeur qui est la largeur de l'écran en pixels CSS à une échelle de 100%. (Il y a correspondante height et device-height valeurs, ce qui peut être utile pour les pages avec des éléments qui changer la taille ou la position de la fenêtre d'affichage de la hauteur.)

L' initial-scale propriété contrôle le niveau de zoom lorsque la page est chargée pour la première fois. L' maximum-scale, minimum-scale, et user-scalable propriétés de contrôle de la façon dont les utilisateurs sont autorisés pour un zoom avant ou arrière sur la page

Answer 5

avez-vous essayé cela?

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