viewport

2017-02-26 本文已影响0人程序你好

1. 设备像素

屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的。

2. CSS像素

在CSS、JS中使用的一个抽象的概念，单位是px。

CSS像素也可以称为设备独立像素(device-independent pixels)，简称为dips，单位是dp。

一个元素200个CSS元素，200个CSS元素相当于多少个设备像素取决于两个条件：

页面是否缩放屏幕是否为高密度

以iphone5为例：

分辨率：1136pt x 640pt指屏幕上垂直有 1136 个物理像素，水平有 640 个物理像素

屏幕尺寸：4英寸注意英寸是长度单位，不是面积单位。4英寸指的是屏幕对角线的长度。

屏幕像素密度：326dpi屏幕像素密度（Pibel Per Inch）简称ppi，单位是dpi（dot per inch）。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说，ppi越高越好，因为图像会更加细腻清晰。

ppi是可以通过分辨率和屏幕尺寸计算得到的：

布局视口：浏览器厂商定的视口。

视觉视口：用户正在看到的网页的区域，大小是屏幕中CSS像素的数量。

理想视口：定义理想视口是浏览器的事情，Screen size tests和Understanding viewport可以测试你的设备的screen.width值，同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器（如UC、Chrome）之间。

缩放与设备像素、CSS像素的关系

缩放是在放大或缩小CSS像素，比如一个宽度为 200px 的元素无论放大，还是200个CSS像素。但是因为这些像素被放大了，所以CSS像素也就跨越了更多的设备像素。缩小则相反。

缩放与视口（用户缩放）

用户缩放会影响视觉视口的尺寸

页面被用户放大，视觉视口内CSS像素数量减少；被用户缩小，视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。

用户缩放不会影响布局视口

缩放比例

我们在开发者工具中可以在这里查看缩放比例：

这里的 0.3 是相对于理想视口的。

在下载浏览器中，可以这么算（理想视口与视觉视口的比）：

zoom level = screen.width / window.innerWidth

禁止缩放<meta name="viewport" content="user-scalable=no">

设置缩放<meta name="viewport" content="initial-scale=2">

使用initial-scale有一个副作用：同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1与width=device-width的效果是一样的。

完美视口<meta name="viewport" content="width=device-width,initial-scale=1">

解决各种浏览器兼容问题的理想视口设置

设备像素比

在谈到像素的时候，讲到除了缩放，屏幕是否为高密度也会影响设备像素和CSS像素的关系。

在缩放程度为100%（这个条件很重要，在后面会说到）时，他们的比例叫做设备像素比(device pixel ratio)：

dpr = 设备像素 / CSS像素

可以通过JS得到： window.devicePixelRatio