标签：偏移量 比例 别人 ini doc 缩小 手机 log 也有
前几天偶然看到一个pc端网页，发现用手机打开竟然同比缩放了，作为一个前端从业者，我自然想要弄清它到底是怎么缩放的。之后查了它的meta信息，css和js，发现没有任何兼容手机端的代码，那它到底是怎么缩放的呢？百思不得其解，最后无意中看别人说viewport的默认值是980px，才知道原来是viewport的锅。
于是我深入的复习了一下viewport相关知识，把心得记录下来，供以后开发时参考，相信对其他人也有用。
本来看了移动前端开发之viewport的深入理解，但是仍然有一些概念不理解，于是去看了PPK大神对于viewport的研究（第一篇，第二篇，第三篇），算是理清了。
首先从css像素和实际像素说起，css像素就是我们写的css的像素，如果没有进行任何缩放的话，css像素就和实际像素是一样的，如果用浏览器对页面进行了缩放，那么css像素不变，实际像素会根据缩放比例变化。
值得一提的是，缩放是个很重要的概念，在pc端的网页一般没有进行缩放，所以1px的css像素常常等于1px的实际像素。
viewport宽高是用document.documentElement.clientWidth和document.documentElement.Height来取到的。细心观察可以发现，document.documentElement就是html元素，而document.documentElement.clientWidth就是html的宽度。
我们知道，css里面的包含块的宽度会自动延伸至父元素的宽度，所以最外层包含块的宽度会延伸到body的宽度，而body的宽度会延伸到html的宽度，那html的宽度延伸到什么宽度呢？答案是viewport的宽度！所以可以用html的宽度来度量viewport的宽度。
另外，这里有一个小坑，就是html的宽度是可以修改的，但是即使修改了html的宽度，document.documentElement.clientWidth和document.documentElement.Height的值仍然是viewport的宽高，这是html元素的这2个属性的不同之处。
那当我们改了html的宽度之后，怎么获得html的宽高呢？方式是利用document.documentElement.offsetWidth和document.documentElement.offsetHeight.
明白了上面viewport的宽高机制之后就很好理解移动端的viewport了。
移动端由于设备的像素很小，所以如果不进行缩放的话，就只能看到pc端网页的部分内容，所以移动端浏览器在兼容的时候，会对页面进行缩放，但是为了避免在缩放的时候页面发生重排和重绘，浏览器就有2个viewport，一个是我们常说的viewport，它用来放置页面，它的默认值宽度是980px；另一个是可视区域的visual viewport，它是移动端的可视区域，用来放大或缩小。
在pc端，我们常说的viewport就等于可视区域的visual viewport，所以css像素和实际像素比是1比1。
在移动端，由于放置页面的viewport的宽度默认为980px，但是设备的宽度常常小于980px，所以可视区域的viewport会对它进行缩放，直到页面内容的宽度正好达到屏幕的宽度。所以我们用手机端看到的pc端页面都是已经缩放过的（如果页面没有设置viewport的话）。
注意，有些情况下，可视区域的viewport的宽度不会等于放置页面的viewport的宽度。比如有一个页面，我们设置它的最外层包含块的最小宽度为1250px，那么放置页面的viewport的宽度仍是默认值980px，但是可视区域的viewport的宽度会达到1250px。
那怎么得到可视区域的缩放比例呢？它等于设备的宽度除以可视区域的宽度，即：screen.width/window.innerWidth。（注意不是viewport的宽度）
其他宽度信息也可以按照上面列出的方法来取。
如果是专门为移动端做的页面，那么常常要设置viewport，使它的两个viewport都等于设备宽度。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">viewport的其它设置方法可以参考：移动前端开发之viewport的深入理解
标签：偏移量 比例 别人 ini doc 缩小 手机 log 也有
原文地址：https://www.cnblogs.com/yangzhou33/p/9160310.html
