超详细讲解H5移动端适配 —— 前置知识

仅用于自我学习
转载自：前端大全

前言

移动互联网发展至今，各种移动设备应用而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现一致，前端工程师就不得不对页面进行移动端适配了。

前置知识

在学习移动端设备前我们需要了解一些相关的前置知识。

设备	平台	屏幕尺寸（in）	长宽比	逻辑像素（dp）	物理像素（px）	倍率
Android One	Android	4.5    2.2*3.9	16:9	320*569	480*854	1.5
Moto G	Android	4.5    2.2*3.9	16:9	360*640	720*1280	2
Moto X	Android	4.7    2.3*4.1	16:9	360*640	720*1280	2
Moto X(2nd Gen)	Android	5.2    2.5*4.5	16:9	360*640	1080*1920	3
Nexus 5	Android	5.0    2.4*4.3	16:9	360*640	1080*1920	3
Samsung Galaxy Note 4	Android	5.7    2.8*5.0	16:9	480*853	1440*2560	3
Samsung Galaxy S5	Android	5.1    2.9*5.6	16:9	360*640	1080*1920	3
Samsung Galaxy S6	Android	5.1    2.5*4.4	16:9	360*640	1440*2560	4
iPhone	IOS	3.5    1.9*2.9	3:2	320*480	320*480	1
iPhone4	IOS	3.5    2.0*2.9	3:2	320*480	640*960	2
iPhone5	IOS	4.0    2.0*3.5	16:9	320*568	640*1136	2
iPhone6	IOS	4.7    2.3*4.1	16:9	375*667	750*1334	2
iPhone6 Plus	IOS	5.5    2.7*4.8	16:9	414*736	1080*1920	3

屏幕尺寸

屏幕尺寸指的意思是以屏幕对角线的长度来计算的，单位是英寸。1英寸 = 2.54厘米

电子设备一般都用英寸来描述屏幕的物理大小，比如我们电脑常见的 22、27英寸。英寸（inch，缩写为 in）在荷兰语中的意思指的是大拇指，一英寸就是指普通人的拇指宽度。

像素 pixel

从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。它指显示屏的画面上表示出来的最小单位，不是图画上的最小单位。一幅图像包含成千上万个像素，每个像素都有自己的颜色信息，它们紧密的组合在一起。一个像素，就是一个点，或者说是一个很小的正方形。

屏幕分辨率

屏幕分辨率指一个屏幕具体由多少像素点组成，单位是 px。

我们可以看到表格中有两种像素：逻辑像素和物理像素，并且它们的数值不一样，还有就是为什么一般 UI 给我们提供的设计稿上的分辨率与真实机型的分辨率不一样。

物理像素（设备像素）

在同一个设备上，他的物理像素是固定的，也就是厂家在生产显示设备时就决定的实际点的个数，对于不同设备物理像素点的大小是不一样的。（设备控制显示的最小单位，我们常说的 1920*1080 像素分辨率就是用的物理像素单位）

如果都是使用物理像素就会带来问题：举个例子，21英寸显示器的分辨率是 14401080 ，5.8英寸的iPhone X 的分辨率是 2436 1125，我们用 css 画一条线，其长度是 20px ，如果都以物理像素作为度量单位，那么在显示器上看起来正常，在 iPhone X 屏幕上就会变得非常小。

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

苹果在iPhone4的发布会上首次提出来 Retina Display （视网膜屏幕）的概念，在iPhone4使用的视网膜屏幕中，把4个像素当一个像素使用，这样让屏幕看起来更精致，并且在不同屏幕中，相同的逻辑像素呈现的尺寸是一致的。所以高分辨率的设备，多了一个逻辑像素。我们从第一张图中可以看到不同设备的逻辑像素仍然是有差异的，只不过差异没有物理像素那么大，于是便诞生了移动端页面需要适配这个问题。（与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素）

每英寸像素点ppi

ppi(pixel per inch) 表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像。

它的计算公式为： PPI = √(x∧2+y∧2) / Z （X：长度像素数；Y：宽度像素数；Z：屏幕大小）

ppi 在 120-160 之前的手机被归为低密度手机，160-240 被归为中密度，240-320 被归为高密度，320以上被归为超高密度。

设备像素比 dpr

dpr(device pixel ratio) 表示设备像素比，设备像素 / 设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取。

计算公式为： DPR = 物理像素 / 逻辑像素

当设备像素比为 1:1时，使用 1（11） 个设备像素显示 1 个 css 像素；
当设备像素比为 2:1时，使用 4（22） 个设备像素显示 1 个 css 像素；
当设备像素比为 3:1时，使用 9（3*3） 个设备像素显示 1 个 css 像素；

概念关系图

屏幕尺寸、屏幕分辨率 → 对角线分辨率 / 屏幕尺寸 → 屏幕像素密度 PPI | 设备像素比 dpr = 物理像素 / 设备独立像素 dip (dp) | viewport: scale | CSS 像素 px

视口 viewport

viewport 指的是视口，它是浏览器或 app 中 webview 显示页面的区域。一般来讲 PC 端的视口指的是浏览器窗口区域，而移动端就有点复杂，它有三个视口：

• [layout viewport]：布局视口
• [visual viewport]：视觉视口
• [ideal viewport]：理想视口

布局视口（layout viewport）

它是由浏览器提出的一种虚拟的布局视口，用来解决页面在手机上显示的问题。这种视口可以通过 <meta> 标签设置 viewport 来改变。移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或 1024px （也可能是其他值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的 viewport 的宽度要小的。
我们通过 document.documentElement.clientWidth 来获取布局视口大小。

视觉视口（visual viewport）

它指的是浏览器的可视区域，也就是我们在移动端设备商能够看到的区域。默认与当前浏览器窗口大小相等，当用户对浏览器进行缩放时，不会改变布局视口的大小，但会改变视觉窗口的大小。

我们可以通过 window.innerWidth 来获取视觉视口大小。

理想视口（ideal viewport）

理想中的视口。这个概念最早由苹果提出，其他浏览器厂商陆续跟进，目的是解决在布局视口下页面元素过小的问题，显示在理想视口中的页面具有最理想的宽度，用户无需进行缩放。所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有的iPhone的理想视口宽度都为 320px ，安卓设备的理想视口有 320px、360px 等等。

当页面缩放比例为 100% 时，理想视口 = 视觉视口。

我们可以通过 screen.width 来获取理想视口大小。

meta viewport

对于移动端页面，可以采用 <meta> 标签来配置视口大小和缩放等。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

• [width]：该属性被用来控制视窗的宽度，可以将 width 设置为 320 这样确切的像素数，也可以设为 device-width 这样的关键字，表示设备的实际宽度，一般为了自适应布局，普遍的做法是将 width 设置为 device-width。
• [height]：该属性被用来控制视窗的高度，可以将 height 设置为 640 这样确切的像素数，也可以设为 device-height 这样的关键字，表示设备的实际高度，一般不会设置视窗的高度，这样内容超过的话采用滚动方式浏览。
• [initial-scale]：该属性用于指定页面的初始缩放比例，可以配置 0.0 ~ 10 的数字，initial-scale = 1表示不进行缩放，视窗刚好等于理想视窗，当大于1时表示将视窗进行放大，小于1时表示缩小。这里只表示初始视窗缩放值，用户也可以自己进行缩放，例如双指拖动手势缩放或者双击手势放大。***安卓设备上的 initial-scale 默认值：*无默认值，一定要设置，这个属性才会起作用。在iPhone和iPad上，无论你给 viewport 设的宽是多少，如果没有指定默认的缩放值，则iPhone和iPad会 自动计算这个缩放值，以达到当前页面不会出现横向滚动条（或者说 viewport 的宽度就是屏幕的宽度）的目的。
• [maximum-scale]：该属性表示用户能够手动放大的最大比例，可以配置 0.0 ~ 10 的数字。
• [minimum-scale]：该属性类似 maximum-scale ，用来指定页面缩小的最小比例。通常情况下，不会定义该属性的值，页面太小将难以浏览。
• [user-scalable]：该属性表示是否允许用户手动进行缩放，可配置 no 或者 yes。当配置成 no 时，用户将不能通过手势操作的方式对页面进行缩放。

这里需要注意的是 viewport 只对移动端浏览器有效，对 PC 端浏览器是无效的。

适配与缩放

为了让移动端页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口，所以我们一般会设置 width=device-width ，这就相当于让布局视口等于理想视口；设置 initial-scale=1.0 ，相当于让视觉视口等于理想视口；

上面提到 width 可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale 也有可能影响到布局视口，因为布局视口宽度取得是 width 和视觉视口宽度的最大值。

例如：若手机的理想视口宽度为 400px ，设置 width=device-width ，initial-scale=2 ，此时 视觉视口宽度 = 理想视口宽度 / initial-scale 即 200px ，布局视口取两者最大值即 device-width 400px。

若设置 width=device-width,initial-scale=0.5 ，此时 视觉视口宽度 = 理想视口宽度 / initial-width 即 800px ，布局视口取两者最大值即 800px 。