前言
最近在看一些关于视口的概念的文章，大多数文章着实把我绕的不轻。常常是概念用词不准确，甚至是前后矛盾。
比如看到一篇关于设备分辨率与图像分辨率的文章，前文说“设备分辨率=画面水平方向的像素值 * 画面垂直方向的像素值”，转眼后文又说“设备分辨率指的是各类输出设备每英寸上可产生的点数”。那么问题来了，设备分辨率到底表示的是像素数量还是像素密度呢😥？
诸如此类，加上图像分辨率的概念后，又增加了不少混淆点与错误。于是我花了几小时，仔细翻阅了众多文章和维基百科上的相关概念，希望能把这几个概念梳理清楚。
一、图像像素、大小、分辨率
图像像素
一张图像是由一个个纯色方块组成的网格。这些方块组合在一起，组成一个具有大量细节的图像。
在 Photoshop 中放大图像后，可以看到每个像素周围都被浅灰色轮廓分隔，这是 Photoshop 中的像素网格，它为了让我们更容易看到每个像素。
图像大小（图像尺寸）
图像大小（尺寸）指的是图像的宽度和高度上的像素数量。
图像分辨率
图像分辨率是用来度量数字图像的打印质量，指图像在宽高上每英寸有多少个像素点，分辨率的单位为 PPI(Pixels Per Inch)
比如分辨率值被设定为 300PPI，意味着在打印图像时，宽和高上每英寸具有300个像素点。
说一幅图片的分辨率是 1280*960，其实并不准确。一般来说，很少用分辨率这个概念来衡量电子图片。但是，在生活中，图像分辨率是一个被混用到电子图片的概念，原本含义的目的是“密度”决定“打印质量”，后来被混用，或者说错误的用做衡量图像内的像素点数量。
图像打印尺寸
图像分辨率与图像尺寸共同决定了图像的打印尺寸，即图像的宽高占多少英寸。分辨率高、图像的打印尺寸就小。
在 Photoshop 中把宽度降低，如果单位不是像素，实际修改的是图像打印尺寸，为了让整个图像适应更小的打印尺寸，需要分辨率增加，Photoshop 自动完成了这一点。
图像分辨率不会影响文件大小
对图像分辨率的一个常见误解是，它在某种程度上会影响图像的文件大小。然而改变分辨率并不是改变图像的像素总数，对文件大小没有任何影响。
真正影响图片大小的是图像尺寸和像素深度，像素深度表示一个像素的颜色在计算机中用多少个字节数据来描述，用来储存一个像素的数据位数越多，则这个像素的颜色纸更加丰富、更加细腻、颜色深度越深。
图片文件占用内存大小的计算公式是：图片高度像素数量 * 图片宽度像素数量 * 像素深度
二、屏幕尺寸、分辨率、像素密度
屏幕尺寸
屏幕对角线的长度(单位为英寸)
屏幕分辨率
对于电脑显示器等，屏幕分辨率被用来描述一块屏幕在宽高上的物理像素数量，iPhone 5为例，分辨率为 1136*640。
这里要注意的是，图片的分辨率表示的是图片在打印时的像素密度，而屏幕分辨率表示的是屏幕宽高上的像素数量。而常常有人会混淆它们的分别的作用。
屏幕像素密度
表示显示器在宽高上单位长度的像素数量，以屏幕尺寸为 4 英寸、分辨率为 1136*640的 iPhone5 为例，像素密度为 326PPI。
像素密度计算公式：
其中：
- w 为屏幕横向分辨率
- h 为屏幕纵向分辨率
- d 为屏幕对角线的长度(单位为英寸)。
三、物理像素、CSS像素、设备像素比
物理像素(设备像素 device pixels)
指的是手机或电脑屏上的发光点。手机的物理分辨率指的就是一块屏幕横竖有多少个物理像素排列。
CSS像素
又称为设备独立像素(device independent pixel)、逻辑像素
在浏览器中，通过 window.screen.width、window.screen.height 获取浏览器的 CSS像素宽高
CSS像素的单位是 px，是一个相对单位，其相对性体现在在同一个设备上或在不同设备之间每 1px 所代表的物理像素是可以变化的。
- 在一般 PC 屏幕上，CSS像素与物理像素是一一对应的。例如：分辨率为 1366*768 的屏幕，其浏览器的最大宽度为 1366px。
- 在 retina 屏幕上，一个 CSS像素映射到多个物理像素。例如：分辨率为 2560*1600 的14英寸MacBook PRO，浏览器的最大宽度为 1280px。
设备像素比(device pixels ratio)
设备像素比(dpr)是指未缩放状态下，1px CSS像素占用多少设备像素。
dpr 为 2，代表一个 CSS像素在未缩放下占用 2*2 个物理像素
经过缩放后，一个 CSS像素理所当然的会占用更多个物理像素。
四、视口
布局视口
为什么要有布局视口
在PC端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的CSS像素宽度保持一致。对于应用了 display: fixed 样式的元素，它的包含块就是视口。
视口并不是初始包含块（html 元素的包含块），虽然它们的大小一致。初始包含块会随页面滚动而滚动，而视口始终是浏览器的可视区域。
移动端浏览器通常其CSS像素宽度是 240px~640px，而大多数为PC端设计的网站CSS像素宽度至少为 800px，如果不对页面进行缩放的话，网站内容在手机上的可视区域会非常的狭小。
因此，引入了布局视口这个概念，在移动端中根据布局视口来进行页面布局，然后调整缩放。
什么是布局视口
当一个PC端的网站在手机端展示时：
- 把网站放到一个虚拟容器中。这个虚拟容器的CSS像素宽度是 980px，980 是人为规定的，手机在出厂时就设置好了。
- 如果网站整体的宽度也是 980px，就会正好放到这个虚拟容器。
- 如果网站宽度小于 980px，这个虚拟容器也可以放下。
- 如果网站宽度大于 980px，网站在这个虚拟容器中就会产生一个水平滚动条。
- 把这个虚拟容器放到手机里。
- 如果手机的CSS像素宽度也是 980px，正好把这个虚拟容器放下。
- 实际上，手机的CSS像素宽度到不了 980px，虚拟容器就会被缩放。
在上面的过程中，这个虚拟容器就是布局视口。在桌面端，视口与浏览器窗口的宽度一致，但在手机上，布局视口与移动端浏览器屏幕宽度并不关联。
如何设置布局视口
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
- width：设置布局视口的宽度。
- initial-scale：设置页面的初始缩放值。
- viewport 标签只对移动端浏览器有效，对PC端浏览器是无效的。
视觉视口
它是用户正在看到的网站的区域，注意是网站的区域。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了；同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
理想视口
布局视口的默认宽度 980px 并不是一个理想的宽度，而是为了完整显示PC端网页而设置的宽度。理想的宽度应该是设备的CSS像素(设备独立像素)宽度。
当布局视口等于设备宽度时，就可以说是一个理想视口。基于理想视口开发网站，让网站的内容大小合适于手机屏幕大小，从而用户无需缩放页面，获得了最佳的浏览体验。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
参考
每英寸像素 - 维基百科，自由的百科全书 (wikipedia.org)
分辨率 - 维基百科，自由的百科全书 (wikipedia.org)
显示器分辨率与图像分辨率与图像大小关系 - 哔哩哔哩 (bilibili.com)
作为前端，你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐 - 掘金 (juejin.cn)
