Avant de nous plonger dans ce que vous demandez, examinons un peu pourquoi la viewport
balise META existe en premier lieu. Voici ce que j'ai rassemblé.
Pourquoi avons-nous besoin de la viewport
balise?
Une fenêtre d'affichage est une zone où le contenu Web peut être vu. Habituellement, la page rendue (contenu Web) est plus grande que la fenêtre d'affichage. Par conséquent, nous utilisons généralement des barres de défilement pour voir le contenu masqué (car la fenêtre ne peut pas tout afficher). Extrait du module d'adaptation de périphérique CSS niveau 1 :
La fenêtre étroite est un problème pour les documents conçus pour être beaux dans les navigateurs de bureau. Le résultat est que les fournisseurs de navigateurs mobiles utilisent une taille de bloc contenant initiale fixe qui est différente de la taille de la fenêtre d'affichage et proche de celle d'une fenêtre de navigateur de bureau typique. En plus du défilement ou du panoramique, le zoom est souvent utilisé pour basculer entre une vue d'ensemble du document et zoomer sur des zones particulières du document pour lire et interagir avec.
Dans les appareils mobiles (et autres petits appareils), le bloc contenant initial est généralement plus grand que la fenêtre d'affichage. Par exemple, un appareil mobile qui a une largeur d'écran de 640px
peut avoir un bloc contenant initial de 980px
. Dans ce cas, le bloc contenant initial est réduit 640px
afin qu'il puisse être inséré dans l'écran mobile. Cette 640px
largeur (largeur d'écran) est ce qu'on appelle initial-width
de la fenêtre qui sera pertinente pour notre discussion.
Alors ... Pourquoi avons-nous besoin de cette viewport
balise? Eh bien, de nos jours, nous avons des requêtes multimédias qui nous permettent de concevoir pour des appareils mobiles. Cependant, cette requête multimédia dépend de la largeur réelle de la fenêtre d'affichage. Dans les appareils mobiles, l'agent utilisateur applique automatiquement un style à la taille de la fenêtre d'affichage initiale en une taille fixe différente (généralement supérieure à la taille de la fenêtre d'affichage initiale). Donc, si la largeur de la fenêtre d'affichage d'un appareil mobile est fixe, les règles CSS que nous utilisons dans les requêtes multimédias ne seront pas exécutées simplement parce que la largeur de la fenêtre d'affichage ne change jamais. En utilisant la viewport
balise, nous pouvons contrôler la largeur réelle de la fenêtre d'affichage (après avoir été stylisée par l'UA). Cité de MDN :
Cependant, ce mécanisme n'est pas aussi bon pour les pages optimisées pour des écrans étroits utilisant des requêtes multimédias - si la fenêtre virtuelle est de 980 pixels par exemple, les requêtes multimédias qui démarrent à 640 pixels ou 480 pixels ou moins ne seront jamais utilisées, ce qui limitera l'efficacité de telles techniques de conception réactives.
Notez que la viewport
balise peut également modifier la hauteur réelle de la fenêtre d'affichage, pas seulement la largeur
viewport
Mots clés width
Le width
dans une viewport
balise est traduit max-width
dans la @viewport
règle. Lorsque vous déclarez le width
as device-width
, il est traduit 100%
dans la @viewport
règle. La valeur en pourcentage est résolue en fonction initial-width
de la fenêtre d'affichage. Donc, si nous utilisons toujours l'exemple ci-dessus, le max-width
sera résolu à une valeur de 640px
. Comme vous l'avez découvert, cela ne spécifie que le max-width
. Le min-width
sera automatiquement extend-to-zoom
.
extend-to-zoom
Votre question était quelle est exactement la valeur de l'extension au zoom ? D'après ce que j'ai rassemblé, c'est la valeur qui est utilisée pour prendre en charge la fenêtre s'étendant pour s'adapter à la zone de visualisation à un niveau de zoom donné. En d'autres termes, il s'agit d'une valeur de taille de fenêtre qui change en fonction de la valeur de zoom spécifiée. Un exemple? Étant donné que la max-zoom
valeur de la feuille de style UA est 5.0
et l' initial-width
est 320px
, <meta name="viewport" content="width=10">
se résoudra à une largeur réelle initiale de 64px
. Cela a du sens, car si un appareil ne dispose que de 320 pixels et ne peut être agrandi que sur 5x
la valeur normale, la taille minimale de la fenêtre d' 320px divided by 5
affichage serait , ce qui signifie qu'il ne devrait afficher que 64 pixels à la fois ( et non 10px
car cela nécessiterait un zoom 32x!). Cette valeur sera utilisée par l'algorithme pour déterminer comment étendre (modifier) les valeurs min-width
et max-width
, qui jouera un rôle dans la détermination de la largeur réelle de la fenêtre d'affichage.
Mettre tous ensemble
Donc, essentiellement, quelle est la différence entre <meta name="viewport" content="width=device-width, initial-scale=1.0">
et <meta name="viewport" content="initial-scale=1.0">
? Refaites simplement les étapes de l'algorithme ( ceci et cela ). Faisons d'abord ce dernier (celui sans width
attribut). (Nous supposerons que initial-width
la fenêtre d'affichage l'est 640px
.)
width
n'est pas défini, cela se traduit max-width
et min-width
est extend-to-zoom
dans la @viewport
règle.
initial-scale
est 1.0
. Cela signifie que la zoom
valeur est également1.0
- Let la détermination
extend-to-zoom
. Pas:
extend-zoom = MIN(zoom, max-zoom)
. L' MIN
opération se résout à la valeur non auto
. Ici, zoom
c'est 1.0
et max-zoom
c'est auto
. Cela signifie que extend-zoom
est1.0
extend-width = initial-width / extend-zoom
. C'est facile; divisez 640 par 1. Vous obtenez extend-width
est égal à640
- Parce que
extend-zoom
c'est non auto
, nous passerons au deuxième conditionnel. max-width
est en effet extend-to-zoom
, cela signifie que max-width
sera réglé sur extend-width
. Donc,max-width = 640
min-width
est également extend-to-zoom
, cela signifie la mise min-width
à max-width
. On amin-width = 640
- Après avoir résolu les
auto
extend-to-zoom
valeurs non (c'est-à-dire les ) pour max-width
et min-width
. Nous pouvons passer à la procédure suivante . Parce min-width
ou max-width
n'est pas auto
, nous utiliserons la première if
dans la procédure, ouvrant ainsi la fenêtre réelle initiale width
à MAX(min-width, MIN(max-width, initial-width))
, ce qui équivaut à MAX(640, MIN(640, 640))
. Cela se résout à 640
votre fenêtre d'affichage réelle initialewidth
- Passer à la procédure suivante . Dans cette étape, ce
width
n'est pas le cas auto
. La valeur n'est pas modifiée et nous nous retrouvons avec la fenêtre width
d' affichage réelle de640px
Faisons le premier.
width
est défini, cela se traduit par max-width
être 100%
( 640px
dans notre cas) et min-width
être extend-to-zoom
dans la @viewport
règle.
initial-scale
est 1.0
. Cela signifie que la zoom
valeur est également1.0
- Let la détermination
extend-to-zoom
. Si vous suivez attentivement les étapes (presque les mêmes que ci-dessus), vous vous retrouverez avec un max-width
de 640px
et un min-width
de 640px
.
- Vous pouvez probablement voir le motif maintenant. Nous obtiendrons la largeur réelle de la fenêtre d'affichage
640px
.
Alors, quelle est la différence perçue? Essentiellement aucun . Les deux font la même chose. J'espère que mon explication aide ;-) Si quelque chose n'allait pas, dites-le moi.
1.0
, mais je ne suis pas sûr de cela. Quoi qu'il en soit, bonne réponse, merci!