web浏览器的像素和视口

像素

物理像素

屏幕上的像素点，单位物理像素在图像中不可再分割

逻辑像素（css的px像素）

css中px单位表示的像素，1px不一定就等于1个物理像素，不同的设备换算可能不同

如果设备1px等于两个2个物理像素，则50px *50px的图片实际物理像素应该是100 *100，即有10000物理像素点组成，如果小于这个值，则视觉上图片看起来模糊。

设备像素比

1px对应的物理像素个数称为设备像素比

视口（viewport）

布局视口(layout viewport)

window.innerHeight和window.innerWidth所组成的区域通常被认为是布局视口

视觉视口（visual viewport）

视觉视口指当前浏览器中可见的部分

宽度和高度的媒体查询是相对于布局视口，即主文档（document）中的窗口（window对象）

在CSS中，我们也有基于视口大小的长度单位。 1vh单位是1%布局视口的高度，vw单位与此类似

iframe 文档内基于宽度的媒体查询将会使用 iframe 的视口宽度进行参照，不是整个浏览器视口

SVG 进行媒体查询时，其参照的高度和宽度取决于包裹着 SVG 的容器，不是整个浏览器视口

移动设备的视口

pc浏览器的分辨率一般比移动设备的分辨率大，为了让页面能全部在移动设备展示，移动设备视口宽度通常为980px，渲染时会对页面进行缩放。比如在宽320px的移动设备显示980px 的页面，移动设备浏览器会对这个页面进行缩放直至完全展示。缩放会导致字体变小。

移动端浏览器可以使用屏幕宽度替换默认的 980px 视口宽度，此时宽320px的移动设备只能完全显示320px的页面：

设置视口宽度为屏幕宽度：