Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport

Lors de la reconstruction ou du développement de pages Web sur des appareils mobiles, la première chose à comprendre est la fenêtre d'affichage sur l'appareil mobile. Ce n'est qu'en comprenant le concept de fenêtre d'affichage et en comprenant l'utilisation des balises méta liées à la fenêtre d'affichage que nous pourrons faire mieux. ou répondez aux appareils mobiles avec différentes résolutions.

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. Le concept de fenêtre d'affichage

En termes simples, la fenêtre d'affichage sur un appareil mobile est l'écran de l'appareil qui peut être utilisé pour afficher notre page Web La zone, pour être précis, est la zone du navigateur (il peut également s'agir de la vue Web dans une application) utilisée pour afficher la page Web, mais la fenêtre d'affichage ne se limite pas à la zone visible du navigateur Taille, qui peut être plus grande ou plus petite que la zone visible du navigateur. Par défaut, en général, la fenêtre d'affichage sur les appareils mobiles est plus grande que la zone visible du navigateur. Cela est dû au fait que la résolution des appareils mobiles est plus petite que celle des ordinateurs de bureau, donc pour pouvoir consulter les sites Web traditionnels conçus pour les navigateurs de bureau. affiché sur l'appareil. Le navigateur de l'appareil mobile définira sa fenêtre d'affichage par défaut sur 980px ou Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx (il peut également s'agir d'autres valeurs, cela est déterminé par l'appareil lui-même), mais avec la conséquence est qu'une barre de défilement horizontale apparaîtra dans le navigateur, car la largeur de la zone visible du navigateur est inférieure à la largeur de la fenêtre par défaut. L'image ci-dessous répertorie les largeurs d'affichage par défaut des navigateurs sur certains appareils.

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS n'est pas égal à Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx de l'appareil

En CSS on a généralement En utilisant px comme unité, Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport pixel CSS dans les navigateurs de bureau correspond souvent à Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport pixel physique de l'écran de l'ordinateur. Cela peut nous donner l'illusion que les pixels CSS sont les pixels physiques de l'appareil. Mais la situation réelle n'est pas la suivante. Le pixel en CSS n'est qu'une unité abstraite. Dans différents appareils ou différents environnements, les pixels physiques de l'appareil représentés par Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS sont différents. Dans les pages Web conçues pour les navigateurs de bureau, nous n’avons pas à nous en soucier, mais sur les appareils mobiles, nous devons le comprendre. Sur les appareils mobiles précédents, la densité de pixels de l'écran était relativement faible, comme sur l'iPhone Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, qui avait une résolution de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0 x Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport80. Sur l'iPhone Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, un pixel CSS équivalait en effet à un pixel physique sur l'écran. Plus tard, avec le développement de la technologie, la densité de pixels de l'écran des appareils mobiles est devenue de plus en plus élevée. À partir de l'iPhone Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, Apple a lancé ce qu'on appelle l'écran Retina, qui a doublé la résolution à Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0x9Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0, mais la taille de l'écran n'a pas changé. signifie que sur un écran de même taille, il y a deux fois plus de pixels. A ce moment, un pixel CSS équivaut à deux pixels physiques. Il en va de même pour les autres marques d'appareils mobiles. Par exemple, les appareils Android peuvent être divisés en différents niveaux en fonction de la densité des pixels de l'écran, tels que ldpi, mdpi, hdpi, xhdpi, etc., et les résolutions varient également. Un pixel CSS sur un appareil Android équivaut à combien. Il s'agit de pixels physiques sur l'écran, qui varient également d'un appareil à l'autre. Il n'y a pas de conclusion.

Il existe un autre facteur qui peut également provoquer des changements de px en CSS, à savoir la mise à l'échelle de l'utilisateur. Par exemple, lorsque l'utilisateur double la taille de la page, les pixels physiques représentés par Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS doubleront également ; à l'inverse, lorsque la page est doublée, les pixels physiques représentés par Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS seront également doublés ; Ce point sera abordé plus loin dans l’article.

Dans les navigateurs mobiles et certains navigateurs de bureau, l'objet fenêtre a un attribut devicePixelRatio. Sa définition officielle est : le rapport entre les pixels physiques de l'appareil et les pixels indépendants de l'appareil. pixel/pixel indépendant. px en CSS peut être considéré comme un pixel indépendant de l'appareil, donc grâce à devicePixelRatio, nous pouvons savoir combien de pixels physiques représente un pixel CSS sur l'appareil. Par exemple, sur un iPhone doté d'un écran Retina, la valeur de devicePixelRatio est de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, ce qui signifie qu'Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport pixel CSS équivaut à Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport pixels physiques. Cependant, il convient de noter que devicePixelRatio présente encore des problèmes de compatibilité dans différents navigateurs, nous ne pouvons donc pas lui faire entièrement confiance pour le moment. Pour des situations spécifiques, veuillez lire cet article.

Résultats des tests de devicePixelRatio :

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. La théorie des trois fenêtres de PPK

ppk master a effectué de nombreuses recherches sur les fenêtres d'affichage sur les appareils mobiles (Partie Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, Partie Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, Partie Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport). Les étudiants intéressés peuvent également y jeter un œil. ppk pense qu'il existe trois fenêtres d'affichage sur les appareils mobiles.

Tout d'abord, les navigateurs sur appareils mobiles estiment qu'ils doivent permettre à tous les sites Web de s'afficher correctement, même ceux qui ne sont pas conçus pour les appareils mobiles. Mais si la zone visible du navigateur est utilisée comme fenêtre d'affichage, parce que les écrans des appareils mobiles ne sont pas très larges, lorsque des sites Web conçus pour les navigateurs de bureau sont affichés sur des appareils mobiles, la fenêtre d'affichage de l'appareil mobile sera inévitablement trop étroite. Et si vous êtes entassés, même la disposition sera gâchée. Certaines personnes pourraient se demander : n'existe-t-il pas actuellement de nombreux téléphones mobiles dotés de très grandes résolutions, telles que Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport8 x Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport ou Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport 080 x Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0 ? Est-il acceptable que ces téléphones mobiles affichent des sites Web conçus pour les navigateurs de bureau ? Comme nous l'avons déjà dit, Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS ne représente pas Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx sur l'écran. Plus votre résolution est grande, plus il y a de pixels physiques représentés par Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS et plus la valeur de devicePixelRatio est grande. C'est facile à comprendre, car vous avez la résolution. a augmenté, mais la taille de l'écran n'a pas beaucoup augmenté. Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx en CSS doit représenter plus de pixels physiques, de sorte que la taille des éléments de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx sur l'écran soit similaire à celle des appareils basse résolution, sinon il sera trop petit pour voir clairement. Ainsi, sur un appareil comme Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport080xSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0, par défaut, il vous suffit peut-être de définir la largeur d'un p à plus de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00 px (en fonction de la valeur de devicePixelRatio), qui correspond à la largeur plein écran. De retour au sujet, si la zone visible du navigateur sur un appareil mobile est définie sur la fenêtre d'affichage, certains sites Web s'afficheront encombrés car la fenêtre d'affichage est trop étroite, ces navigateurs décident donc de définir la fenêtre d'affichage sur une fenêtre plus large par défaut. . valeur, telle que 980px, afin que même les sites Web conçus pour les ordinateurs de bureau puissent être affichés normalement sur les navigateurs mobiles. ppk appelle la fenêtre par défaut de ce navigateur fenêtre de mise en page. La largeur de cette fenêtre de mise en page peut être obtenue via document.documentElement.clientWidth.

Cependant, la largeur de la fenêtre de mise en page est plus grande que la largeur de la zone visible du navigateur, nous avons donc également besoin d'une fenêtre pour représenter la taille de la zone visible du navigateur. zone. , ppk appelle cette fenêtre fenêtre visuelle. La largeur de la fenêtre visuelle peut être obtenue via window.innerWidth , mais elle ne peut pas être obtenue correctement sous Android Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport, Oprea mini et UC 8.

Nous avons maintenant deux fenêtres : fenêtre de mise en page et fenêtre visuelle . Mais le navigateur estime que cela ne suffit pas, car de plus en plus de sites Web sont désormais conçus séparément pour les appareils mobiles, il doit donc y avoir une fenêtre d'affichage qui puisse parfaitement s'adapter aux appareils mobiles. L'adaptation dite parfaite signifie que d'une part, l'utilisateur peut visualiser normalement tout le contenu du site Web sans avoir besoin de zoom et de barres de défilement horizontales, et d'autre part, la taille du texte affiché est appropriée, par exemple un morceau de texte ; un texte de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport px ne sera pas affiché en raison de la taille du texte. L'affichage sur un écran de pixels haute densité est trop petit pour être vu clairement. La situation idéale est que la taille de ce texte de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport px soit similaire quelle que soit la densité. écran et quelle résolution. Bien sûr, cela est vrai non seulement pour le texte, mais aussi pour d'autres éléments tels que les images et ainsi de suite. ppk appelle cette fenêtre fenêtre idéale, qui est la troisième fenêtre - la fenêtre idéale pour les appareils mobiles.

La fenêtre idéale n'a pas de taille fixe. Différents appareils ont des fenêtres idéales différentes. La largeur idéale de la fenêtre d'affichage de tous les iPhones est de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0 px, que la largeur de leur écran soit de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0 ou Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0. C'est-à-dire que sur iPhone, Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0 px en CSS représente la largeur de l'écran de l'iPhone.

 

Mais les appareils Android sont plus compliqués, il y a Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px, Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px, Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport8Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx, etc. La largeur d'affichage idéale des différents appareils est de combien ? sur http://viewportsizes.com, qui collecte les largeurs idéales pour de nombreux appareils.

Pour résumer : ppk divise la fenêtre d'affichage sur les appareils mobiles en port d'affichage de mise en page, port d'affichage visuel et fenêtre idéale Trois catégories, parmi lesquelles la fenêtre idéale est la fenêtre la plus adaptée aux appareils mobiles. La largeur de la fenêtre idéale est égale à la largeur de l'écran de l'appareil mobile. L'élément est défini sur la fenêtre d'affichage idéale en largeur CSS (l'unité est px), alors la largeur de cet élément est la largeur de l'écran de l'appareil, ce qui est l'effet d'une largeur de Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00 %. L'importance de la fenêtre d'affichage idéale est que, quelle que soit la résolution d'écran utilisée, les sites Web conçus pour une fenêtre d'affichage idéale peuvent être parfaitement présentés aux utilisateurs sans nécessiter que les utilisateurs effectuent un zoom manuel ou des barres de défilement horizontales.

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. Utilisez des balises méta pour contrôler la fenêtre d'affichage

La fenêtre d'affichage par défaut pour les appareils mobiles est la fenêtre de mise en page, qui est celle plus large que la fenêtre d'affichage de l'écran, mais lors du développement de sites Web pour appareils mobiles, nous avons besoin d'une fenêtre d'affichage idéale. Alors, comment puis-je obtenir la fenêtre d’affichage idéale ? C'est au tour de la balise méta d'apparaître.

Lorsque nous développons un site Web pour appareils mobiles, l'une des actions les plus courantes consiste à copier ce qui suit dans notre balise head :

<meta name="viewport" content="width=device-width, initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport.0, maximum-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport.0, user-scalable=0">

Cette fonction de la balise méta doit rendre la largeur de la fenêtre actuelle égale à la largeur de l'appareil, tout en ne permettant pas à l'utilisateur de zoomer manuellement. Peut-être que différents sites Web ont des exigences différentes pour permettre aux utilisateurs de zoomer, mais rendre la largeur de la fenêtre d'affichage égale à la largeur de l'appareil devrait être l'effet souhaité par tout le monde. Si vous ne le définissez pas ainsi, le rapport d'écran sera utilisé. . La fenêtre par défaut est large, ce qui signifie qu'une barre de défilement horizontale apparaîtra.

Que contient exactement cette balise méta nommée viewport, et quelle est sa fonction ?

La balise méta viewport a été introduite pour la première fois par Apple dans son navigateur Safari pour résoudre le problème de fenêtre d'affichage des appareils mobiles. Plus tard, Android et les principaux fabricants de navigateurs ont également emboîté le pas et ont introduit la prise en charge de la méta-fenêtre. Les faits ont également prouvé que cette chose est toujours très utile.

Dans les spécifications d'Apple, la méta-fenêtre a Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport attributs (appelons ces éléments dans les attributs et les valeurs du contenu), comme suit :

width

Définir la largeur de la

width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

fenêtre de mise en page

à un entier positif, ou la chaîne "width-device"

échelle initiale

Définissez la valeur de mise à l'échelle initiale de la page, qui est un nombre, avec les décimales autorisées

échelle minimale

La valeur de mise à l'échelle minimale autorisée par l'utilisateur est un nombre, les décimales étant autorisées < /td>

échelle maximale

La valeur de zoom maximale autorisée par le user , est un nombre, avec des décimales

hauteur

Définissez la hauteur de la

target-densitydpi

值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

fenêtre d'affichage de mise en page<🎜><🎜> Cet attribut n'est pas important pour nous et est rarement utilisé.

évolutif par l'utilisateur

Que l'utilisateur soit autorisé à zoomer, la valeur est "non" ou "oui", non signifie non autorisé, oui signifie autorisé

<🎜>Ces attributs peuvent être utilisés en même temps, seuls ou mélangés. Lorsque plusieurs attributs sont utilisés en même temps, il suffit de les séparer par des virgules. . <🎜><🎜>De plus, Android prend également en charge l'attribut privé target-densitydpi, qui représente le niveau de densité de l'appareil cible et est utilisé pour déterminer combien de pixels physiques Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx représente en CSS <🎜><🎜>

特别说明的是，当 target-densitydpi=device-dpi 时， css中的Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx会等于物理像素中的Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx。

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。

五、把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

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

下图是这句代码在各大移动端浏览器上的测试结果：

可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

这样的写法看起来谁都会做，没吃过猪肉，谁还没见过猪跑啊~，确实，我们在开发移动设备上的网页时，不管你明不明白什么是viewport，可能你只需要这么一句代码就够了。

可是你肯定不知道

<meta name="viewport" content="initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。

呵呵，傻眼了吧，因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00%的缩放，也就是缩放值为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。

测试结果表明 initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。

但如果width 和 initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport同时出现，并且还出现了冲突呢？比如：

<meta name="viewport" content="width=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00, initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport">

width=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00表示把当前viewport的宽度设为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00px，initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00，ideal viewport的宽度为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0时，取的是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00；当width=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00， ideal viewport的宽度为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport80时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport">

六、关于meta viewport的更多知识

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport、关于缩放以及initial-scale的默认值

首先我们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px，如果我们设置 initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport ，此时viewport的宽度会变为只有Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px了，这也好理解，放大了一倍嘛，就是原来Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx的东西变成Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx了，但是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx变为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx并不是把原来的Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px变为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px了，而是在实际宽度不变的情况下，Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx变得跟原来的Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx的长度一样了，所以放大Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport倍后原来需要Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px才能填满的宽度现在只需要Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px就做到了。因此，我们可以得出一个公式：

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

当前缩放值 = ideal viewport宽度  / visual viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。

大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport。

好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport，因为当 initial-scale = Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。

根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：

当前缩放值 = Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0 / 980

也就是当前的initial-scale默认值应该是 0.Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport、动态改变meta viewport标签

第一种方法

可以使用document.write来动态输出meta viewport标签，例如：

document.write(&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;<meta name="viewport" content="width=device-width,initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport">&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;)

第二种方法

通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport80"><script>var mvp = document.getElementById(&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;testViewport&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;);
mvp.setAttribute(&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;content&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;,&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;width=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport80&#Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport9;);</script>

安卓Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport.Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport自带浏览器上的一个bug

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

测试的手机ideal viewport 宽度为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px，第一次弹出的值是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00,但这个值应该是第行meta标签的结果啊，然后第二次弹出的值是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0，这才是第一行meta标签所达到的效果啊，所以在安卓Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport.Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport(或许是所有Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。

七、结语

说了那么多废话，最后还是有必要总结一点有用的出来。

首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewportpx等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport">

来得到一个理想的viewport（也就是前面说的ideal viewport）。

为什么需要有理想的viewport呢？比如一个分辨率为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0xSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport80的手机理想viewport的宽度是Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px，而另一个屏幕尺寸相同但分辨率为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0x9Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0的手机的理想viewport宽度也是为Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0、Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-ViewportSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport0、Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport8Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport、Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport00等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

【相关推荐】

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. 特别推荐：“php程序员工具箱”V0.Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport版本下载

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. 关于viewport兼容性问题的实例代码

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport. HTMLSujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport中Viewport的参数介绍以及使用方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!