认识meta下的viewport

[pekonchan]

写移动端适配，脱离不了此代码的作用

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

接下来我们好好了解下，viewport的相关知识。

种类

现在的人们，对viewport的认知，都会为其区分为三个概念。顺应潮流，为大家介绍下这三种viewport

layout viewport

pc端的网站布局空间都比较大，而移动端由于设备屏幕比较小，如果把pc端的网站放到移动端，想必由于屏幕大小差异巨大，而导致网站布局错乱，挤到一块了吧。因此为了避免此种问题，浏览器生厂商并不会直接把屏幕的大小作为网站的布局空间，网站的布局宽度往往会比设备的屏幕宽度要大，基本不会让pc端的网站放在移动设备上太过于混乱，尽量按照pc端的布局来显示。

而生厂商设定的这个布局空间（主要是宽度的差异），就是layout viewport，我们说的“布局视口”，可通过document.documentElement.clientWidth获取。如图：

但是实际情况下，默认手机里显示pc网站的内容并不会只有网站的一部分，这要结合下面的说initial-scale来说了，这里先缓一下。

visual viewport

顾名思义，表示“可视视口”，什么是可视呢？就是你所能看见内容的窗口大小。首先我们要明白，visual viewport的大小是按照css像素（即css中写的px，是个设备独立像素）来衡量的。当然，layout viewport也是css像素衡量，毕竟是通过document.documentElement.clientWidth获取到，值固然是css意义上的像素值。

因此，visual viewport是可变的，因为你看到的内容范围，也是可变的。如你缩放页面，看到的网站内容范围就会发生变化，然后看到的内容按照你网站内容所占有的css像素，就知道当前visual viewport的尺寸了。

ideal viewport

这是一个概念上的视口，是个“理想视口”，何为理想？就是你能够不用缩放或拖动浏览器滚动条就能完全看到网站的内容，且展示情况良好，大小适中，在不同设备下展示情况都良好。这么一种视口尺寸下展示出来的网站，就是理想的。

很明显，想让我们的网站能在移动端上显示情况理想，就让网站的layout viewport设成跟ideal vieport一样就好了（主要是宽度）。往往浏览器宽度是跟设备屏幕宽度一样的，故一般ideal vieport的宽度，就是跟设备的屏幕宽度是一样的。

需要注意的是，ideal viewport（主要是宽度）会随着设备的转向而改变。竖屏和横屏的移动设备，ideal viewpwort的宽度是不一样的。

所以我们要做的是，就是让布局视口的宽度，变成跟设备宽度一样，然后在理想视口下绘制咱们的网站，就能在移动端上显示“最好的我们”。即开头说的那段代码的功效了

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

也许有人会好奇，从理解上（毕竟我们还是认识单词的），不是写width=device-width，宽度等于设备宽度不就好了吗？那就要下节了

利用vieport

首先先认识下viewport的meta的几个属性值，即content里的内容

key	value
width	设置layout viewport的宽度，为一个正整数或特殊值"device-width"，表示设备宽度
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数，值是视口宽度比， ideal viewport / layout viewport
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport的高度（少使用）
user-scalable	是否允许用户进行缩放，值为no或yes, no 代表不允许，yes代表允许

这里值得一提是，所有关于scale的，都是指相对于ideal viewport来比较的。

关于initial-scale

这里主要说说initial-scale，还记得在layout viewport那节里，留了个悬念吗？

但是实际情况下，默认手机里显示pc网站的内容并不会只有网站的一部分，这要结合下面的说initial-scale来说了，这里先缓一下。

现在就说说原因了。实际上浏览器为了让pc端的网站显示更加友好，他会自动计算initial-scale，让网站能够在移动设备的屏幕上，显示出整个网站内容，就对其进行缩放了，即改变了initial-scale。

那么上节说的，不是只写width=device-width就好了吗的问题，从inital-scale的计算方式可知，设置成1时，即ideal viewport = layout viewport，就达到了布局宽度等于设备宽度的目的了。所以，其实你设置成这样，同样达到效果

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

<!--or-->

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

既然这样，单写某个就好啦，为啥要一起写呢。其实是这样的，当只设置width=device-width时，在iPhone、iPad设备上，当竖屏变为横屏时，其实是不会切换到横屏的设备宽度的，但设置initial-scale=1.0却能弥补该缺陷；但仅设置initial-scale=1.0时，对于windows phone 上的IE来讲，始终是竖屏的设备宽度，但设置width=device-width却能弥补该缺陷；因此，为了让更多设备更多浏览器支持，两个一起写就更稳妥了。