layout viewport visual viewport ideal viewport

我们经常见到用 K和 P这个单位来形容屏幕：
P代表的就是屏幕纵向的像素个数， 1080P即纵向有 1080个像素，分辨率为 1920X1080的屏幕就属于 1080P屏幕。
我们平时所说的高清屏其实就是屏幕的物理分辨率达到或超过 1920X1080的屏幕。
K代表屏幕横向有几个 1024个像素，一般来讲横向像素超过 2048就属于 2K屏，横向像素超过 4096就属于 4K屏。
四、视口
视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。
一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。
4.1 布局视口

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。
所以，布局视口是网页布局的基准窗口，在 PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders 、 margins、滚动条）。
在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。
我们可以通过调用 document.documentElement.clientWidth/clientHeight来获取布局视口大小。
4.2 视觉视口

视觉视口( visual viewport)：用户通过屏幕真实看到的区域。
视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）。
当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。
例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。
所以，布局视口会限制你的 CSS布局而视觉视口决定用户具体能看到什么。
我们可以通过调用 window.innerWidth/innerHeight来获取视觉视口大小。
4.3 理想视口

布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口( ideal viewport)就诞生了：网站页面在移动端展示的理想大小。
如上图，我们在描述设备独立像素时曾使用过这张图，在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。
上面在介绍 CSS像素时曾经提到 页面的缩放系数=CSS像素/设备独立像素，实际上说 页面的缩放系数=理想视口宽度/视觉视口宽度更为准确。
所以，当页面缩放比例为 100%时， CSS像素=设备独立像素， 理想视口=视觉视口。
我们可以通过调用 screen.width/height来获取理想视口大小。

链接：https://www.jianshu.com/p/d22270046013/