2012-12-03 7 views
4

J'ai hérité d'un ensemble de modèles pour un site basé sur Twitter Bootstrap. Dans le <head> la méta-balise suivante apparaît:twitter bootstrap viewport

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

Mais selon les documents, il devrait être:

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

Quelqu'un peut-il expliquer ce que la différence entre ces deux est?

Répondre

7

Ce ne sont que des propriétés différentes, vous pouvez en ajouter une ou plusieurs. Sur le site de Mozilla:

La propriété largeur contrôle la taille de la fenêtre. Il peut être réglé sur un nombre spécifique de pixels, comme width = 600 ou sur la valeur spéciale device-width qui est la largeur de l'écran en pixels CSS à une échelle de 100%.

Et le second contrôle le zoom lorsque la page est affichée:

La propriété initiale échelle contrôle le niveau de zoom lorsque la page est d'abord chargée.

De plus, vous pouvez également utiliser la échelle maximale, minimum à l'échelle et évolutive utilisateur propriétés afin de mieux contrôler la façon dont les utilisateurs zoomer la page ou arrière. Ceci est nécessaire car les appareils mobiles ont des densités de pixels très différentes, donc en spécifiant des propriétés comme celles-ci, une page avec aura presque la même taille physique dans les iPhones, Galaxies, Nokias, etc., indépendamment de la densité de l'écran.

More info here (Mozilla page)

+0

Si j'omets 'initiale échelle = 1.0" ' t-il par défaut à cette valeur, ce qui rend les 2 déclarations ci-dessus –

+0

indentical efficacement? Puisque la norme est pas encore bien défini (au moins la dernière fois que j'ai vérifié), J'imagine que cela dépend de l'implémentation.Par exemple, Safari mobile utilise par défaut un zoom calculé qui permet d'ajuster la page Web dans la zone visible.Si vous voulez vous assurer de l'ajouter également. – alemangui