深入浅出Viewport设计原理2

逻辑像素、逻辑分辨率

对于同一个元素，DPR越大，渲染时需要的物理像素就越多。这是我们上面得出的结论。
那么，在软件开发中，元素的大小到底应该写成多少px？
为了解决这个问题，我们引入“逻辑像素”的概念。
平时我们在css中写的px指的就是逻辑像素，而不是物理像素，一个逻辑像素可以代表一个或多个物理像素。
假设，我们现在设置一个元素的css样式如下：

那么，这个元素在不同屏幕上渲染方式是不同的：

dpr=1时，1个逻辑像素对应1个物理像素。
dpr=2时，1个逻辑像素对应2个物理像素，才能保证元素大小。
dpr=3时，1个逻辑像素对应3个物理像素，才能保证元素大小。
因此，我们可以得出一个结论：
一个逻辑像素所代表的物理像素个数与该屏幕的DPR成正比。
即：逻辑像素 = 物理像素 / DPR 有了这个公式，我们就能推到出屏幕的逻辑分辨率，也就是屏幕的逻辑宽度和逻辑高度。 逻辑宽度 = 水平物理像素 / DPR 逻辑高度 = 垂直物理像素 / DPR比如iPhone6的物理分辨率为750 x 1334，DPR = 2，带入公式就可以得出其逻辑分辨率： ![在这里插入图片描述](/i/ll/?i=direct/a9270ddb97a146ad9eea402e564be3c2.png#pic_center) 因此，iPhone6的逻辑分辨率为375 x 667.在JavaScript中，也可以通过 DOM APL 来获取屏幕的逻辑分辨率： ![在这里插入图片描述](/i/ll/?i=direct/ae8b8fb572f6411cb54245c1de966636.png#pic_center)通常，我们在css中设置的元素尺寸，本质上都是基于逻辑分辨率进行布局的。``（也就是布局时预期所写即所得）

iPhone常见的几种规格

Viewport

1.Viewport到底是什么？

我们在写H5页面的时候，通常会再html的head中加入下面这句话：

这句话就是在设置页面的viewport。那viewport到底是什么？为什么要设置它？
简单来说：viewport是屏幕背后的一张画布。
下面，我们将逐个理解viewport中的每个概念。

2.Viewport画布

浏览器会先把页面内容绘制到画布上，然后再通过屏幕窗口呈现出来。
画布的宽度可大可小, 当画布的宽度大于屏幕宽度时，画布上的内容就无法通过屏幕全部展示出来，用户可以通过屏幕手势来拖动画布查看被遮挡的部分。

如果没有在 html 中加 viewport 的设置，画布其实也是存在的，浏览器会给画布设置一个默认宽度 ，不同平台的默认值如下：

画布的宽度可以通过 DOM API 来获取：

3.device-width 指的是什么?

device-width 指屏幕可视窗口（屏幕）在水平方向上的逻辑像素

device-width 的大小可以通过 window.screen.width 来获取

4.width = device-width 在设置谁的宽度?

width 指的是画布的宽度，device-width 是可视窗口宽度。
width=device-width 就是把画布的宽度设置为可视窗口的宽度，让画布上的内容完全呈现出来。
设置了 width=device-width 之后，画布的宽度就和屏幕的宽度一样大了.

5.画布缩放 – scale

scale 是指画布以 device-width 大小为基准的缩放值。
initial-scale=1.0 也就相当于设置了 width=device-width

通常需要同时设置这两个值，这是因为两者在不同平台有兼容性问题:

在iPhone 和 iPad 上，只支持 inital-scale=1 的设置，而在 IE 只支持 width=device-width ，所以两者同时设置，可以兼容所有的平台。

6.三个Viewport

通常，我们把画布称为 layout viewport, 把屏幕可视窗口称为 visual viewport。
而把设置 width=device-width 的画布称为 ideal viewport，即“理想视口”。

我们通常在 html 中设置 viewport 就是为了得到理想视口，方便用户阅览。

总结

提示：这里对文章进行总结：