对一个Web App来说，移动端适配是很重要的。为了提供良好的用户体验，网页上的文字、图片和按钮等元素都必须有一个合适的尺寸。但是，市场上有不同尺寸、不同分辨率的屏幕，从4.7英寸的iPhone SE 3，到6.7英寸的iPhone 15 Plus；从403ppi的Xiaomi 9高清屏到552ppi的Xiaomi 14 Pro 2K屏。好奇的同学可能会问，同一个网页背后运行的是同一份代码，如何做到在不同屏幕上表现一致呢？这就是我们今天要介绍的H5移动端适配。
页面能够根据不同的屏幕分辨率，自动调整页面元素的尺寸，使其表现一致。这就是移动端适配。
举个例子，下面有几个不同分辨率的屏幕，现在要在页面上要展示一个300x400的图片。
按照我们直观的理解，屏幕分辨率越大，图片会显得越小。但实际效果并不是这样的，如下图所示，两个不同分辨率的屏幕，展示的页面并不会有太大的差异，好像300x400这个尺寸会自动缩放一样。
在好奇心的驱使下，我们来看看页面是怎么实现"自动缩放"的。
说到页面元素尺寸和屏幕分辨率，肯定绕不开“像素”。顾名思义，像素（pixel）即组成图像的最小元素。
理论上，图像是一个连续平滑的二维平面，由无数个无限小的“点”组成。照相机把图像中特定位置的颜色信息记录了下来，形成了图片。图片上的"点"是有限个的，并且没有大小信息，所以叫逻辑像素，也就是我们常用的CSS像素单位。
屏幕根据图片记录的位置和颜色信息进行展示，形成了我们肉眼看到的图片。屏幕上的"点"是有大小的，称之为物理像素。
如果我们把图片放大，会看到很多小方块，这些就是逻辑像素。
如果用更精细的维度来观察屏幕，又会发现另外一番景象。如图所示，在放大镜下的屏幕，可以看到很多小光斑，这些就是物理像素。
不同屏幕的像素尺寸和像素间隔是有差异的，用一个专业术语来描述，即像素密度。像素密度（ppi），表示屏幕每英寸包含的像素个数。
计算公式如下：
下面是几个尺寸相同，分辨率不同的屏幕。可以看出，相同尺寸的屏幕，分辨率越高，显示越清晰。 即ppi越大，屏幕越清晰。
其实屏幕做的事情看起来很简单，就是把CSS像素转换为屏幕像素，这种转换关系有一个术语叫设备像素比dpr。
例如，dpr=1的屏幕，1个CSS像素被渲染成1*1个屏幕像素；dpr=2的屏幕，1个CSS像素被渲染成2*2个屏幕像素。
早期的手机屏幕ppi比较低，dpr一般是1。随着手机性能的不断提升，屏幕ppi也逐渐变大。如果还是保持原先的dpr，将会导致ppi越大的屏幕，显示的图片越小。其实，这个问题在乔布斯时代就已经出现。
乔布斯在 iPhone4的发布会上首次提出了 RetinaDisplay(视网膜屏幕)的概念。相比上一代的iPhone 3G手机，iPhone 4的ppi翻了一倍，这在常规的手机使用距离下，ppi已经高到人眼无法区分的程度。所以在iPhone 4的屏幕上，1个CSS像素被渲染为2*2个屏幕像素，即保证了图片大小看起来一致，同时也让图片的锯齿边缘变得更平滑。
// 在浏览器获取 屏幕的dpr
window.devicePixelRatio
现在，我们尝试来回答前面的问题：网页是如何适配不同屏幕的？为了适配不同ppi的屏幕，1个css像素会被渲染成1个或多个屏幕像素。通常随着屏幕ppi的增大，dpr也会跟着变大。从而实现了在不同ppi的屏幕上，页面能够表现一致。
这次主要围绕“ppi”来讲移动端适配，属于硬件层的适配。下次还会从“viewport”的角度来展开，看看移动端适配还会遇到什么问题呢。
