聊聊viewport那些事儿

前言

在移动端网页开发的时候，咱们的页面将会不一样于以往的PC网页的开发，由于PC网页的屏幕远远大于手机屏幕上的网页，咱们在浏览器上开启手机调试模式的话，看到的效果会呈现出一个缩小的效果，因此咱们通常都会制做一个可以适配于小屏幕手机的网站出来，供手机用户浏览。
可是对于viewport的概念可能还不太了解，下面我来说讲我对viewport的理解

viewport

有时候被称为包含块或视口，能够认为他是html标签的上级元素，html标签会默认等同于他的宽度。

在PC端浏览器上的视口宽度是与浏览器内部的宽度是保持一致的，可是移动端浏览器的状况会不同，介于各类设备的分辨率大小、以及浏览器的特性、供应商的要求等等方面，它们的视口大小可能会不同。

一些苹果的手机设备会默认使用980px的视口大小，这就意味着你的网页在苹果手机上显示的效果，将会跟980px的pc下显示没有任何差异，只不过是缩小的而已。

(上图分别以iphone6和PC显示为例)

网页在手机设备上显示都会自动适应该手机设备的布局视口的宽度，由于有个默认的缩放比例，正好让980px缩放到375px（iphone6）的大小，这就是他能彻底展现在手机屏幕上的缘由。 这时候的页面会呈现的很挤压，可是却能让980px的东西展现在手机上，这就牵扯到三个视口的概念，分别是：布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)

上面陈述的980px的大小实际上是来自于布局视口。

咱们透过手机屏幕看到的那部分区域——视觉视口

为了容纳手机这个较小的显示区域，视觉视口会默认等同于布局视口，可是手机屏幕远远达不到980px的宽度，因此在手机上会呈现"缩小"的状态，这样可以尽量的彻底渲染出来全部的页面内容，在使用手机调试模式看的时候能够发现这一点。

这时候视觉视口能够经过放大缩小来看到网页的不一样角落，可是体验性是不好的。 甚至若是页面宽度过大会出现横向滚动条。

如何作到理想地展现网页的大小，那就须要搬出——理想视口。

理想视口（ideal viewport），其实就是手机屏幕的大小，将布局视口设置成理想视口，页面就可以适应到合适的尺寸，用户就再也不须要本身去缩放和拖动网页了。 利用如下代码能够达到这一点：

<meta name="viewport" content="width=device-width"/>
复制代码

这里的width设置就是布局视口的宽度，device-width表明着理想视口的宽度。

能够看到980px的视口如今变成了320px。

这个属性仍是有其余成员的：

width 设置的布局视口的宽度
initial-scale 设置初始缩放比例和布局视口的宽度
minimun-scale 设置最小缩放比例
maximum-scale 设置最大缩放比例
height 设置布局视口的高度，可是好像没有做用
user-scalable 是否容许用户缩放 no为不容许
复制代码

咱们一般看到的代码都是家庭总动员：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
复制代码

可是其中的意义仍是比较含混，比如如这个 "initial-scale=1.0"，为何须要缩放1倍？

这个初始缩放比例实际上是相对于理想视口的，也就是仅仅使用这样的代码就能够达成理想视口：

<meta name="viewport" content="initial-scale=1.0">
复制代码

这段话的意义是将布局视口设置成1倍于理想视口。

那为何须要多写一遍，缘由在于兼容性的问题

咱们从上表能够得知，苹果产品是没有彻底支持width的，相反IE也不彻底支持initial-scale，因此为了达成全部浏览器都能兼容的目的，必要地须要去作这样操做。

initial-scale：先前说到这是相对与理想视口的宽度，就是说若是咱们在375px上的屏幕上使用0.5的缩放的话视觉视口就是160px了，是吗？

并非，如今在视口的大小是：750

缘由是原先的1个CSS像素宽能表示2个设备像素宽,如今只能表示1个了（1/2）,这时候像素会增多，展现的内容也会增多，因此像素会比原先多了一倍，内容看上去也会小不少

这里有个专门的公式可以告诉你如今的视口是多大：

视觉视口宽度=理想的视口宽度/缩放因子 
复制代码

(上图是用1倍的缩放比例，下图是用2倍的缩放比例)

这里说的CSS像素和设备像素是什么？

设备像素和CSS像素 这里讲到的像素指的分别是咱们手机屏幕上看到的物理像素 以及 咱们在CSS中使用的像素，他们不是等同的概念.

正常而论，在PC端上是1个设备像素对应1个CSS像素，但在移动端上不少时候其实他们都不是 1：1的关系的。

而能影响CSS像素与设备像素的对应关系的就是：缩放比例和DPR（设备像素和CSS像素的比值，即设备像素比）。
复制代码

为何说1个CSS像素宽表示2个设备像素宽？

这是随着时代的变迁带来的结果，市面上的手机不断在更新换代，屏幕的分辨率也在步步攀升，做为手机市场的领头羊——苹果，首先推出了retina屏幕，这时候的dpr=2，像素的密度比以前高了一倍，这样能呈现更清晰、更细腻的效果，本来的1个CSS像素这时候对应的是2倍的设备像素，但其实CSS像素是没有变化的，100px仍然是100px，变化的是设备像素的多少。

PDR为2的状况下像素的对应关系，一个CSS像素宽等于2个设备像素宽，因此一个CSS像素表明着4个设备像素(宽高总和)。

而咱们在使用0.5缩放比例的时候，呈现的效果如图示是这样的：

好了 以上是我的结合其余大神理解得来的 还请各位大神不要见笑~ 恳求指正学习~

参考文章：

PPK教程
博客园
简书
div.io
知乎
HcySunYang