前置知识（有助于viewport的理解）
李明：设备像素、设备独立像素、CSS像素、分辨率、PPI、devicePixelRatiozhuanlan.zhihu.com移动端的问题
屏幕窄，一般来说设备独立像素不超过400px。
比如把网站侧边栏宽度设置为10%，这在PC浏览器看起来没问题(一般视窗大于1000px)，但在手机上就只有40px，太小了什么都放不下。
visual viewport 和 layout viewport
我们把layout viewport想象为一个很大的照片，把visual viewport想象为在一张板子上开了的矩形口子。板子在照片上移动时，透过口子(visual viewport) 可以看到照片(layout viewport)的其中部分。
- layout viewport是页面渲染时所参考的宽高
- visual viewport 是移动端视窗的设备独立像素宽高
在移动端，页面在渲染时以layout viewport宽度作为计算标准。以iphone为例，其 layout viewport 宽度是980px，页面元素渲染时就认为窗口为980px宽。对于如下两个buton，在Iphone Safari上.button-1的宽度为为.button-2的1/10。渲染后在整体缩小(user-scale)页面，让页面宽度正好完全填充屏幕。缩小后的.button-1的宽度为37.5px，为屏幕宽度的1/10，可读性变差了。
.button-1 {
width: 98px;
}
.button-2 {
width: 100%;
}
为解决这一问题，需要设置viewport
viewport的概念
对于页面上一个div元素，我们给他设置width: 10%，这个10%是相对于谁？最终是多宽？
<html>
<body>
<div style="width:10%">测试宽度</div>
</body>
</html>div是body的10%， body和html等宽，html和浏览器窗口等宽，当改变浏览器窗口宽度时，div的宽度也会改变，大家可以自行测试。
假设有如下页面，没设置viewport。对于大部分浏览器，会以980px宽度去渲染，然后页面会缩小到正好被屏幕容纳为止。此时页面上元素看起来很小。如下图所示：
部分浏览器可能不去做自动缩放，用户需要左右滑动页面才能看到所有内容，如下图：
现在添加<meta name="viewport" content="width=device-width">，假设在IphoneX上预览，其device-width就是其设备独立像素，即375px。
最终效果如下，看起来好多了。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=0.5"> width
width属性被用来控制layout viewport（布局视窗）的宽度,layout viewport（布局视窗）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以?width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width，width=device-width 也就是将layout viewport（布局视窗）的宽度设置为设备屏幕分辨率的宽度。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备独立像素），layout viewport的宽度＝屏幕分辨率的宽度＝dip 的宽度。
initial-scale
initial-scale用于指定页面的初始缩放比例，initial-scale=1 表示将layout viewport的宽度设置为屏幕分辨率的宽度，initial-scale=1.5 表示将layout viewport的宽度设置为屏幕分辨率宽度的1.5倍。
maximum-scale
maximum-scale用于指定用户能够放大的最大比例，假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的3倍。
minimum-scale
类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。设置为0.5表示用户能够将页面缩小到初始页面的0.5倍，通常情况下，不会定义该属性的值，页面太小将难以阅读。
扫一扫
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
