移动端适配

移动端 Web 页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 Web 页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

在具体介绍适配方案之前，需要了解以下基础内容：

• 设备像素（物理像素）
• 屏幕尺寸和像素密度（PPI）
• CSS 像素（设备独立像素、逻辑像素）
• 像素比（DPR）

设备像素（物理像素）

对于一般的显示设备来说，一个像素对应着屏幕上的一个发光点，这个点能够发出红、绿、蓝三种颜色的光，通过混合不同的 RGB 值，为我们创造了一个像素的颜色。因此设备像素就是指实际存在的像素。

问：在看一个设备屏幕的参数时，往往就有分辨率这么一个参数，例如 2340 × 1080，这代表什么含义呢？

答：这表示在设备屏幕的水平方向上有 2340 个像素点，垂直方向上有 1080 个像素点。

问：为什么手机端的是纵横比？

答：实际上在智能手机之前，大部分功能手机和黑莓屏幕都也还是横屏，下面则是按键区。后来屏幕慢慢扩大，才逐渐拉长的。再到了智能手机时代，因为不需要键盘区域了，而屏幕又越来越大，因此就将屏幕竖着放置。因此，分辨率的表示方式仍然是横纵比，只不过因为屏幕竖着放了，给人的感觉是纵横比。

屏幕尺寸和像素密度（PPI）

在手机配置信息里面还会有屏幕尺寸这个信息，一般以英寸为单位。那么这个屏幕尺寸（单位：英寸）是指什么呢？英寸是一个长度单位，1 英寸（inch）等于 2.54 厘米（cm）。其次这里的 6.67 英寸指的是屏幕对角线的长度。

有了屏幕分辨率和屏幕尺寸的信息，我们就可以计算像素密度（PPI）。所谓像素密度，就是指 1 英寸下的设备像素数量，计算公式如下：

我们可以简单的计算一下 iPhone6 Plus 的 ppi,可以看到正如官方所描述的每英寸有 401 个设备像素，也就是 ppi 值为 401。

// 屏幕斜边的像素
const margin = Math.sqrt(Math.pow(1080, 2) + Math.pow(1920, 2))
console.log(margin) // 2202.9071700822983
console.log(margin / 5.5) // 400.52857637859967 PPI

常见设备 ppi 值查询：https://www.sven.de/dpi/

CSS 像素（设备独立像素、逻辑像素）

ppi 越高，所包含的设备像素也就越多。但是这就会滋生出另外一个问题，如果我的 CSS 像素和设备像素是 1:1 的关系的话，随着设备像素的提升，图像就会越来越小。

之前 CSS 像素和设备像素是 1:1 的关系，现在只需要将这个比例稍作修改即可。

以前 CSS 像素和设备像素 1:1 关系，1 个 CSS 像素对应 1 个设备像素，那么现在我修改这个比例，1 个 CSS 像素对应 2 个设备像素即可。

以前在做 PC 端网页开发的时候，由于 CSS 像素始终和设备像素是 1:1 的关系（不考虑缩放），所以给大家了一种错觉，以为 CSS 像素和设备像素就是 1:1 的对应关系，但是实际上 CSS 像素确是一个抽象的单位，具体含有多少个设备像素不是一定的。