viewport、像素、分辨率

移动端web所遇屏幕适配问题：

这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致，可以让网页的宽度自动适应手机屏幕的宽度，利用浏览器自身缩放完成适配

作用：该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport(浏览器默认的layout viewport)，也就是说会出现横向滚动条。

【viewport】

需知概念：视觉视窗、布局视窗、理想视窗

visual viewport (视觉视窗) ，
代表浏览器可视区域的大小，宽度可以通过window.innerWidth 来获取
layout viewport (布局视窗) ，
一个较宽的值，宽度可以通过 document.documentElement.clientWidth 来获取
ideal viewport (理想视窗)，
不需要用户缩放和横向滚动条就能正常的查看网站的所有内容的宽度

visual-viewport.png

layout-viewport.png

【像素】

需知概念：设备物理像素，设备独立像素、设备像素比、css像素

设备物理像素
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。每英寸的像素点个数
设备独立像素
(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素” )，然后由相关系统转换为物理像素。
设备像素比
设备像素比 = 物理像素 / 设备独立像素(device-width) // 在某一方向上，x方向或者y方向
css像素
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在不同的屏幕上(普通屏幕 vs retina屏幕)，1个css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

CSS像素 =设备独立像素 = 逻辑像素
设备像素 =设备物理像素 = 物理像素

Image.png

【分辨率】

需知概念：px、pt、PPI

px
是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。
pt
全称为point，但中文不叫“点”，查金山词霸可以看到，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。
PPI:
像素密度，即每英寸屏幕所拥有的像素数。像素密度越大，显示画面细节就越丰富，屏幕的PPI越高，对一张图片的显示越清晰，细腻。

因此就有这样的说法，在网页设计中，pixel（px）是相对大小，而point（pt）是绝对大小，即1pt大小固定，1px大小不固定

Image.png

自己理解：

如果设置如上meta，则：layout viewport（设备独立像素） =设备的宽度（设备物理像素）
如果没设置如上meta，则: layout viewport（设备独立像素） =浏览器默认的宽度（设备独立像素），通常会比较大出现滚动条
在PC端设备物理像素和设备独立像素数值相等

CSS像素在不放大和缩小的情况下，在任何设备中的1个CSS像素都是一样大的
缩放会引起CSS像素的变化——即引起每1个CSS像素所代表的物理像素变化。
例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
注意：当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口不会改变。移动端的缩放不会导致CSS布局被重新计算
在普通屏幕下，1个css像素(设备独立像素) 对应 1个设备物理像素(1:1
)。
在retina 屏幕下，1个css像素(设备独立像素)对应 4个设备物理像素(1:4
)。
在改变浏览器窗口大小的时候没有改变1css的大小，改变的是宽高，比如屏幕宽高由 20px、20px 改变成了 10px、10px
图片制作出来如果没有修改放到什么显示器上分辨率都不会变
改变的只是倍率（即一个像素点的大小，即一个像素点包括几个pt）
因为图片总的像素点个数是不变的，每个像素点的大小由显示分辨率决定
像素密度越大，越清晰
在同一个手机或电脑设备上，它的设备像素是固定的，这是厂商在出厂时就设置好了的————即一个设备的分辨率是固定不变的。
1px设备物理像素大小在不同设备中是不同的，由分辨率和尺寸共同决定
只有1pt的大小是固定的