不习惯的 Vue3 起步五 のapiHooks 封装

移动端适配就是在进行屏幕宽度的等比例缩放

文中我强调了移动端适配是对屏幕宽度进行缩放：对于普通的流式布局(长屏幕页面)，页面内容是可以上下滚动的。屏幕小，一屏幕看到的东西虽然变少，但是用户可以通过手势滚动页面，继续浏览下一屏的内容。因此在常规情况下，对于屏幕宽度进行等比例缩放已经能解决大部分应用场景了

但是对于一种特殊的场景：单屏页面（又称翻屏页面），由于需要把一整屏的内容完整展示给用户，同时又要求页面不能出现滚动条，那么，仅仅只是针对屏幕宽度进行等比例缩放的适配，其实效果并不理想

设备独立像素 (CSS像素)

设备独立像素是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素

以iphone7举例:

iphone7的设备独立像素为 375 * 667

也就是手机全屏下的大小，同时也是chrome模拟器展示的尺寸

可以通过js的screen.width和screen.height获取

设备像素 (物理像素)

设备像素也可以叫物理像素，由设备的屏幕决定，其实就是屏幕中控制显示的最小单位

以iphone7举例:

iphone7的设备像素为 750 * 1334

750 * 1334这个尺寸也可以称为设计像素，我们设计和开发页面时，就是以这个设计像素为准

设备像素比（DPR）

设备像素比(dpr) = 设备像素 / 设备独立像素

以iphone7举例:

iphone7的dpr = 2 = 750 / 375

也就是说，在iphone7下，1 css像素 = 2 物理像素

在css中一个1x1大小的正方形里面，其实有4个物理像素

dpr大于2的屏幕也称为视网膜屏幕(Retina)

实际物理像素

iphone7的实际物理像素是750 * 1334，刚好等于设备像素。但不是所有的设备都是实际物理像素等于设备像素

iphone7 plus的实际物理像素是1080 * 1920。它的dpr为3，设备独立像素为414 * 736，根据公式可以得出，它的设备像素等于1242 x 2208，远大于实际物理像素。手机会自动把1242 * 2208个像素点塞进1080 * 1920个物理像素点来渲染，我们不用关心这个过程

单屏幕

前面介绍了这么多概念，其实在真正开发中，我们主要关心的是设备独立像素和设备像素

设备像素 决定了设计稿的尺寸。移动端设计稿一般是750 * 1334 尺寸大小（ iPhone6 的设备像素为标准的设计图），因此相对比较固定

设备独立像素 决定了设备的屏幕大小。iOS平台下，屏幕尺寸还算相对固定，但是到了Android平台下，屏幕尺寸那就_{千奇百怪，百花争鸣}了。

特别需要注意的一点：即使设备独立像素确定了大小，我们的网页被用户看到的时候，实际高度还是比设备独立像素的高度小很多

主要原因是：我们的网页往往是在手机的浏览器上访问的，而这些浏览器自带了顶部地址栏和底部工具栏，这两部分的高度又进一步压缩了我们网页展示的高度（如果我们的网页是在第三方客户端内打开的，比如微博，微信，Twitter, Facebook，那么一般只有顶部地址栏）

举个例子，iphone11的设备独立像素是414 * 896

左图是在safari浏览器下：可以看到上下红框部分是浏览器自带的区域，只有蓝框是实际网页展示的高度，这个蓝框的大小是 414 * 715(documentElement.clientWidth/documentElement.clientHeight)，已经比设备独立像素的高度少了181像素(896 - 715)

右图是在微信自带浏览器下：可以看到顶部红框部分是浏览器自带的区域，只有蓝框是实际网页展示的高度，这个蓝框的大小是 414 * 804(documentElement.clientWidth/documentElement.clientHeight)，也比设备独立像素的高度少了92像素(896 - 804)

收集到的一些常见设备尺寸大小: