viewport的理解和使用

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

viewport概念

移动端浏览器一般都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展现没有作移动端适配的网页，可让他们完整的展示给用户。咱们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。

css中的像素和设备像素的区别

在桌面网页开发时，css中的1px就是设备上的1px；然而css中的1px仅仅是一个抽象的值，不表明实际像素为多少；而在移动设备中，不一样设备的像素密度是不同的，css中的1px可能并不等于真实设备的一个像素值。用户缩放也会改变css中的1px表明多少设备像素。这个比例就是devicePixelRatio

物理像素/独立像素 = devicePixelRatio
复制代码

咱们能够在浏览器中进行缩放，在控制台中打印window.devicePixelRatio来查看devicePixelRatio的大小。其中的独立像素能够理解为css中的px。

视口基础

一个典型的针对移动端优化的站点包含相似下面的内容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
复制代码

如下为viewport的几个属性，这些属性能够混合来使用，多个属性同时使用要用逗号隔开。这里咱们展开一个概念，叫作ideal viewport，指的是理想状况下的viewport，不须要用户缩放和横向滚动条就能正常查看网页的全部内容，而且可以看清全部文字，不管这个文字在css中定义为多小，显示出来时能够看清的。

属性	描述
width	控制视口的宽度，能够指定数字；或设置device-width来指定
height	控制视口的高度，这个属性不过重要，不多使用
initial-scale	控制页面最初加载时的在在idealviewport下缩放等级，一般设为1，能够是小数
maximum-scale	容许用户的最大缩放值，为一个数字，能够带小数
minimum-scale	容许用户的最小缩放值，为一个数字，能够带小数
user-scalable	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

viewport进阶

1.width和initial-scale

当设置了width和initial-scale时，浏览器会自动选择数值最大的进行适配。如设置：

<meta name="viewport" content="width=400, initial-scale=1">
复制代码

浏览器会选择数值大的进行适配，若是当前窗口ideal viewport宽度为300，initial-scale值为1，取得是width为400的值；若是当前窗口的ideal viewport为480，则取480。

事实上，width=device-width和initial-scale=1都表明应用ideal viewport，但在ipad、iphone等移动设备和IE上，横竖屏不分，默认都取竖屏的宽度，兼容性最好的写法就是

<meta name="viewport" content="width=device-width, initial-scale=1">
复制代码

2.动态改变属性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
复制代码

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
复制代码

参考资料

1. MDN -- 在移动浏览器中使用viewport元标签控制布局
2. 移动前端开发之viewport的深刻理解