vscode
HTML
viewport
在vscode中自动生成html框架代码后，其中有这么一句
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
此语句是为了解决移动设备上网页的视窗问题。
什么是viewport
viewport是设备上能显示网页的那一块区域，也是浏览器上用来显示网页的区域。但是，viewport并不是与浏览器的可视区域完全相同，一般来说设备上的viewport要大于浏览器的可视区域。因为移动设备的分辨率要小于桌面电脑的分辨率，所以为了让移动设备能够正常显示为桌面电脑而设计的网站，移动设备的浏览器默认的viewport设置为980px或1024px，当然是由设备决定的。因此移动设备上浏览为桌面电脑设计的网页就会产生横向滚动条。
| iPhone | iPad | Samsung | HTC | CHrome | Opera Presto | BlackBerry | IE |
|---|---|---|---|---|---|---|---|
| 980 | 980 | 980 | 980 | 980 | 980 | 1024 | 1024 |
viewport种类
ppk大神认为移动设备上有3个viewport：
· layout viewport：显示网页的所有内容，可以全部或部分展示给用户
· visual viewport：当前显示给用户内容的窗口，可以拖动，放大缩小。
· ideal viewport：移动设备理想的viewport
首先，css中的1px和设备中1px是不相同的，css中用1px表示电脑屏幕的一个像素，但是现在手机的分辨率越来越高，物理像素密度越来越高，屏幕大小未变，因此可以看出，手机设备的1px和网页css的1px必然不同。在早期，如iPhone3，分辨率为320×480，此时css的一个像素确实是一个屏幕物理像素，然而从iPhone4开始，分辨率提高了一倍，屏幕尺寸未变，意味着同样大小的屏幕上，像素翻了一倍，此时一个css像素是两个物理像素。用户缩放也会引起css像素的改变，用户将页面放大一倍，css所代表的物理像素增加一倍，反之缩小一倍。
如果强行将一个为桌面浏览器设计的页面塞进手机屏幕中，某些网页就会因为设备viewport太窄而显示错乱，因此浏览器就决定将默认viewport设置大一些，这样就算是那些为桌面浏览器设计的网页也能够正常显示，ppk将浏览器上默认的viewport叫做layout viewport。相应的，需要一个viewport表示浏览器可视区域的大小。ppk将这个viewport叫做visual viewport。
此外，浏览器认为需要一个更加完美的viewport，因为越来越多的网页都会为移动设备单独设计网页，所以要有一个完美适配设备的viewport，无需用户缩放，文字大小合适。ppk将此viewport叫做ideal viewport，ideal viewport并不是一个固定的尺寸，不同设备都不同。https://www.quirksmode.org可以查看大部分设备的理想宽度。
控制viewport
移动设备中默认的viewport是layout viewport，但是我们需要的是ideal viewport，那么怎么得到呢？
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
此mate标签可以起到这个作用。让当前viewport等于设备的宽度，不允许用户缩放。否则会使用默认的viewport，会出现横向滚动条。
mate viewport标签首先是苹果公司引入的，目的就是解决设备的viewport问题。后来安卓纷纷效仿，引入对mate viewport的支持，事实证明非常有用。
在苹果规范中，mate viewport有6个属性
| width | 设置layout viewport的宽度，正整数或“width-device” |
|---|---|
| initial-scale | 设置初始缩放值 |
| minimum-scale | 最小缩放值 |
| maximum-scale | 最大缩放值 |
| height | 设置layout viewport的高度 |
| user-scalable | 是否允许用户缩放，值为no或yes |
此外安卓还支持一个私有标签
| target-densitydpi | 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个 |
|---|---|
当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。
设置viewport
要得到ideal viewport就必须将默认的layout viewport设为移动设备的屏幕宽度。
1 | <meta name="viewport" content="width=device-width"> |
1 | <meta name="viewport" content="initial-scale=1"> |
这两句都可以达到同样的效果，将当前的viewport设置为ideal viewport。
第一句显而易见，重点解释一下第二句。
第二句的作用是不对当前页面进行缩放，也就是说页面本来是多大就是多大。首先要理解缩放的意义，是相对什么进行缩放，因为此处缩放值是1，也就是未缩放，但是达到了ideal viewport的效果，那就是说缩放是相对于ideal viewport进行缩放的。
但如果width和initial-scale=1同时出现，而且冲突怎么办？
1 | <meta name="viewport" content="width=400, initial-scale=1"> |
假如ideal viewport是450px，此处就冲突了，一个设置为400，一个设置为450，那么执行哪个呢？浏览器遇到这种情况，会执行较大的值，450。需要注意的是，在uc9中，当initial-scale=1时，无论width设置为多少，viewport都是ideal viewport。
由于两种方法都有部分的小瑕疵，因此两者都使用就可以完美的适配各种问题
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
