# 2023/1/11 4:34
# 视口是什么
在桌面浏览器中，视口即指的是浏览器窗口。
在移动端中，视口分为布局视口（layout viewport）和视觉视口（visual viewport），还有一个概念叫做理想视口（ideal viewport），它是布局视口的理想实现。理想视口的宽度等于视觉视口。
# 视觉视口
视觉视口即移动端屏幕的范围，即设备的可视区域。单位为 CSS 像素（见后文）。
当我们在手机中缩放时，视觉视口的大小会被改变。
# 布局视口
布局视口即我们在 css 代码中可获取的视口范围，我们编写的 html 页面都处于布局视口内。
布局视口宽度若超过了视觉视口，则此时无法看到完整的网页，只能看到视觉视口内的部分。可通过左右滑动查看完整网页。
# 理想视口
视觉视口的大小由屏幕的宽高决定，无法更改，但布局视口可以人为设置大小。为了能让网页的内容完全的显示出来，布局视口有一个最合适的值，这个值就是视觉视口的大小，也就是理想视口。或许可以这么说，“理想视口” 就是 “布局视口的理想值”。当布局视口宽度等于视觉视口，网页的内容就能完整的展现出来，无需缩放和滑动，所以，理想视口的值就是视觉视口。
# 物理像素
显示器的最小物理单位。由红、蓝、绿三个 led 通过不同的亮度混合出各种色彩。
# 设备独立像素（device independent pixels）
区别于物理像素，我们所说的 iphoneX 的逻辑分辨率 375 x 812 指的就是设备独立像素。chrome 检查元素模拟调试手机设备时显示如 375x667 和 320x480 都是设备独立像素。
一个设备独立像素里可能包含 1 个或者多个物理像素点。
# css 像素
在 css 中，使用的 pixel 即 css 像素，当页面缩放比为 1 时，一个 css 像素对应一个设备独立像素，当页面缩放比不为 1 时，CSS 像素和设备独立像素不再对应。比如当页面放大 200%，则 1 个 CSS 像素等于 4 个设备独立像素。
