移动端适配

移动端适配是指在不同尺寸的手机设备上，页面能相对达到合理的展示（响应式）或者保持统一效果的等比缩放（看起来差不多）。本文介绍了移动端适配中需要掌握的基本概念和移动端页面开发中常用的适配方案。

一、基本概念

在做移动端适配之前，我们必须了解一下不同设备之间，显示器或者屏幕究竟有哪些不同。与此相关的概念比较多，也特别容易混淆，这里将对涉及到的主要概念一一介绍。这其中包括硬件中的概念、操作系统或软件中的概念和浏览器中的概念。

如果你觉得混乱了，不要着急，就以 iphone6 为例，细细品味。

1、硬件概念

屏幕尺寸

以 iPhone6 为例，其屏幕尺寸为 4.7英寸，指的是屏幕对角线的长度为 4.7 英寸，1in = 2.54cm。

屏幕分辨率（物理分辨率、设备分辨率）

以 iPhone6 为例，其屏幕分辨率为 750 x 1334，指的是屏幕水平有 750 个像素点，垂直有 1334 个像素点。

设备像素（物理像素）

设备像素（Device Pixels）是显示设备中一个最微小的物理部件，和上面所讲的设备分辨率相对应。

像素密度（Pixels Per Inch）

以 iPhone6 为例，其屏幕像素密度为 326ppi，指的是每英寸有 326 个像素点。

计算公式如下：

注意，像素密度指的并不是每平方英寸中包含的像素点数量，而是屏幕水平或垂直的一条直线上每英寸包含的像素点数量。例如，iPhone6 屏幕宽度为 2.3 英寸，高度为 4.1 英寸，其屏幕像素密度就等于 750 / 2.3 = 326 或 1334 / 4.1 = 326。

2、系统概念

显示分辨率

通常，PC 的显示器分辨率是可以设置的，显示分辨率就是指系统或用户设置的分辨率。用户可以通过修改显示分辨率，修改系统字体大小。通常，显示分辨率小于等于设备分辨率。

以我的 MacBook Pro (13-inch, 2020) 为例，其设备分辨率为 2560 x 1600，系统默认分辨率为 1440 x 900，用户也可以自己设置为 1680 x 1050、1280 x 800、1024 x 640 等几个分辨率。

系统设置分辨率生效是通过算法进行了转换。当用户设置不同的分辨率时，系统将自动根据显示分辨率和物理分辨率的比值来拟合。例如，如果物理分辨率为2560 x 1600，而用户设置的显示分辨率为 1280 x 800，那么 1 个显示像素点将由 4 个物理像素点显示；如果用户设置的分辨率为 1440 x 900，物理分辨率和显示分辨率的比值并不是整数，那么系统将根据各个像素点的色值和亮度计算拟合显示。

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

设备独立像素（又称设备无关像素 Device Independent Pixels 、密度独立性像素 Density Independent Pixels，简称 DIP 或 DP），是一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用（from 百度百科）。设备独立像素可以简单认为是计算机坐标系统中的一个点。

典型的用途是允许移动设备软件将信息显示和用户交互扩展到不同的屏幕尺寸。允许应用程序以抽象像素为单位进行测量，而底层图形系统将应用程序的抽象像素测量值转换为适合于特定设备的物理像素。

逻辑分辨率

逻辑分辨率用屏幕的宽*高来表示（单位：设备独立像素）。

通过 screen.width/height 得到的数值就是整个屏幕（不仅仅是浏览器的区域）的宽度和高度（单位：设备独立像素）。在 PC 中，这个数值就是系统设定的显示分辨率的大小。这个数值不随页面缩放、浏览器窗口大小而改变。对于移动端，这个数值可以在 Chrome 开发者工具中，打开移动端调试，页面顶部显示的就是逻辑分辨率。

以 iPhone6 为例，其逻辑分辨率（设备独立像素数）为 375 × 667。