「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。
题外话
又是一个新的一周，本周的计划已经在计划列表，flag算是立下了。进入正题，今天说说移动端的视口 在正式了解视口之前，先说几句关于屏幕的事情。
1.关于屏幕
1.1 Retina屏幕
下面是百度官网给出的解释，但是官里官气的话术我没看明白，之后我就开始了自己理解的道路。
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。 为什么强调普通使用距离呢？
上面这个公式是Retina屏幕的计算公式。a代表人眼视角，h 代表像素间距，d代表肉眼与屏幕的距离。符合以上条件的屏幕可以使肉眼看不见单个物理像素点。
Retina屏幕它不能代替分辨率或者PPI，它就是一种表达效果。
1.2 1080P和4K
P和K这两个单位也是我们常见的单位。
P就是代表代表我们屏幕纵向的像素数量，1080P即纵向有1080个像素，分辨率为1920X1080的屏幕就属于1080P屏幕。
K代表屏幕横向有几个1024个像素，一般来讲横向像素超过2048就属于2K屏，横向像素超过4096就属于4K屏。
2.视口
视口(
viewport)代表当前可见的计算机图形区域。最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。
2.1 布局视口
布局视口一般指网页的宽度，移动端会默认一个布局视口的宽度。根据不同的机型默认的视口宽度可能不一样，比如
768px和980px等。但是这个宽度并不适合在移动端展示。
像上图描述，在手机浏览这张图片时，由于手机屏幕的尺寸限制，需要我们滑动向右移动才能看见图片的右侧。
我们可以通过调用document.documentElement.clientWidth / clientHeight来获取布局视口大小。
2.2 视觉视口
视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，如下图。
当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度。
我们可以通过调用window.innerWidth / innerHeight来获取视觉视口大小。
2.3 理想视口
理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。
页面的缩放系数 = CSS像素 / 设备独立像素，实际上说页面的缩放系数 = 理想视口宽度 / 视觉视口宽度更为准确。
所以，当页面缩放比例为100%时，CSS像素 = 设备独立像素，理想视口 = 视觉视口。
我们可以通过调用screen.width / height来获取理想视口大小。
题外话
几天的移动端适配就介绍到这里，最近也有很多想做的事情还没有排上日程，希望今年我们能戒掉懒惰，真正的自律起来。也希望走在前端这条路上的小伙伴们能热爱心中所热爱，坚定不移的向前走。
