Effets secondaires de la suppression de «width = device-width» de la balise META de la fenêtre d'affichage lorsque «initial-scale = 1.0» est également défini

Bien que le <meta name="viewport">tag ne soit pas standardisé, il "est respecté par la plupart des navigateurs mobiles en raison de la domination de facto".

Un inconvénient de ne pas être une véritable norme Web est que la documentation détaillée n'est pas aussi disponible que les autres normes. Le CSS Working Group a une spécification pour cela, c'est donc ce que j'utilise principalement comme travail faisant autorité.

Ma principale question est:

Quelle serait la différence perçue entre les déclarations suivantes?

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

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

Sinon, quelles sont les différences entre ces deux règles @ CSS CSS @viewport :

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Comment je suis arrivé à ces @viewporttraductions:

width=device-width à min-width: extend-to-zoom; max-width: 100vw;

Le document CSS Device Adaptation Module Level 1 indique:

Les widthet heightviewport <META>propriétés sont convertis en widthet heightdescripteurs, le réglage de la min-width/ min-heightvaleur extend-to-zoomet max-width/ max-heightvaleur à la longueur de la fenêtre.

Ils donnent également un exemple :

Cet <META>élément:

<meta name="viewport" content="width=500, height=600">

se traduit par:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

Le widthdescripteur de raccourci est décrit comme suit :

Il s'agit d'un descripteur abrégé pour définir à la fois min-widthet max-width. Une <viewport-length>valeur définira à la fois min-widthet max-widthà cette valeur. Deux <viewport-length>valeurs seront définies min-widthpour la première et max-widthpour la seconde.

Il va donc de soi que width: extend-to-zoom 500px;c'est équivalent à min-width: extend-to-zoom; max-width: 500px;.

Cela ne laisse que la 100vwpartie. Dans la section 10.4 , ils expliquent:

device-widthet device-heighttraduire en 100vw et 100vh respectivement

Nous pouvons donc enfin voir comment width=device-widthse traduit min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 à zoom: 1.0; width: extend-to-zoom;

Celui-ci est un exemple textuel :

Cet <META>élément:

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

se traduit par:

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

L'autre question que j'ai ici est, quelle est exactement la extend-to-zoomvaleur?

La documentation à ce sujet et sa procédure de résolution sont difficiles à saisir. Si quelqu'un peut me pointer vers d'autres exemples à ce sujet, ce serait très apprécié.

En plus de tout ce qui précède, j'ai mis en place un site rapide - https://romellem.github.io/temp-site/viewport/ - pour tester certaines configurations de fenêtres.

À savoir:

• content = "width = largeur de l'appareil, échelle initiale = 1.0"
• content = "initial-scale = 1.0"

Cela peut aider à tester.

Avant de nous plonger dans ce que vous demandez, examinons un peu pourquoi la viewportbalise META existe en premier lieu. Voici ce que j'ai rassemblé.

Pourquoi avons-nous besoin de la viewportbalise?

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 640pxpeut avoir un bloc contenant initial de 980px. Dans ce cas, le bloc contenant initial est réduit 640pxafin qu'il puisse être inséré dans l'écran mobile. Cette 640pxlargeur (largeur d'écran) est ce qu'on appelle initial-widthde la fenêtre qui sera pertinente pour notre discussion.

Alors ... Pourquoi avons-nous besoin de cette viewportbalise? 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 viewportbalise, 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 viewportbalise peut également modifier la hauteur réelle de la fenêtre d'affichage, pas seulement la largeur

viewport Mots clés width

Le widthdans une viewportbalise est traduit max-widthdans la @viewportrègle. Lorsque vous déclarez le widthas device-width, il est traduit 100%dans la @viewportrègle. La valeur en pourcentage est résolue en fonction initial-widthde la fenêtre d'affichage. Donc, si nous utilisons toujours l'exemple ci-dessus, le max-widthsera résolu à une valeur de 640px. Comme vous l'avez découvert, cela ne spécifie que le max-width. Le min-widthsera 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-zoomvaleur de la feuille de style UA est 5.0et l' initial-widthest 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 5xla valeur normale, la taille minimale de la fenêtre d' 320px divided by 5affichage serait , ce qui signifie qu'il ne devrait afficher que 64 pixels à la fois ( et non 10pxcar cela nécessiterait un zoom 32x!). Cette valeur sera utilisée par l'algorithme pour déterminer comment étendre (modifier) ​​les valeurs min-widthet 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 widthattribut). (Nous supposerons que initial-widthla fenêtre d'affichage l'est 640px.)

• widthn'est pas défini, cela se traduit max-widthet min-widthest extend-to-zoomdans la @viewportrègle.
• initial-scaleest 1.0. Cela signifie que la zoomvaleur est également1.0
• Let la déterminationextend-to-zoom . Pas:
  1. extend-zoom = MIN(zoom, max-zoom). L' MINopération se résout à la valeur non auto. Ici, zoomc'est 1.0et max-zoomc'est auto. Cela signifie que extend-zoomest1.0
  2. extend-width = initial-width / extend-zoom. C'est facile; divisez 640 par 1. Vous obtenez extend-widthest égal à640
  3. Parce que extend-zoomc'est non auto, nous passerons au deuxième conditionnel. max-widthest en effet extend-to-zoom, cela signifie que max-widthsera réglé sur extend-width. Donc,max-width = 640
  4. min-widthest également extend-to-zoom, cela signifie la mise min-widthà max-width. On amin-width = 640
• Après avoir résolu lesautoextend-to-zoom valeurs non (c'est-à-dire les ) pour max-widthet min-width. Nous pouvons passer à la procédure suivante . Parce min-widthou max-widthn'est pas auto, nous utiliserons la première ifdans 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 à 640votre fenêtre d'affichage réelle initialewidth
• Passer à la procédure suivante . Dans cette étape, ce widthn'est pas le cas auto. La valeur n'est pas modifiée et nous nous retrouvons avec la fenêtre widthd' affichage réelle de640px

Faisons le premier.

• widthest défini, cela se traduit par max-widthêtre 100%( 640pxdans notre cas) et min-widthêtre extend-to-zoomdans la @viewportrègle.
• initial-scaleest 1.0. Cela signifie que la zoomvaleur est également1.0
• Let la déterminationextend-to-zoom . Si vous suivez attentivement les étapes (presque les mêmes que ci-dessus), vous vous retrouverez avec un max-widthde 640pxet un min-widthde 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.