移动端适配

通常移动设备屏幕尺寸大小用英寸（in）来度量，1英寸= 2.54cm。

图片或电子屏幕由很多个具有特定位置和特定大小的方块元素（即像素）组成。

 

 

在iPhone12官网的技术规格上，表明该手机是2532 * 1170像素分辨率。意思是在水平方向和垂直方向上分别有2532和1170个像素点。在设备尺寸相同的情况下，分辨率越高，肉眼观察越清晰。

在这台手机的技术规格说明上，还写了一条460ppi。

ppi （pixel per inch): 每英寸包含的像素数量

  如果水平方向像素点数为x, 垂直方向像素点数为y，手机对角线方向尺寸为size， 则ppi的计算方式为：(x² + y²)½ / size。 所以iPhone12的ppi算出来大约是460ppi。

dpi （dot per inch) : 每英寸包含的点数

  以上在描述图片和电子设备时，dpi和ppi是等价的。但dpi通常被用来描述打印机，即打印机每英寸可以打印的点数。

 

以上涉及到的指标都是基于物理像素描述的。智能手机更新换代，分辨率逐步提高，如果不另做处理，同一个UI元素在低分辨率屏幕上看起来较大，在高密度屏幕上看起来较小。

 

                                                                                                                                                                                                                                                         

比如相对于2532 * 1170， 460ppi的iPhone12， 以前的iPhone5s只有约325ppi。也就是说，iPhone12的ppi是iPhone5s的1.42倍。那么如果长度为一个物理像素大的UI元素在iPhone5s上占据了一个小方块的话，

那么不做处理，这个元素在iPhone12上占据大小为 1 / 1.42 = 0.7个小方块。 也就是元素在分辨率越高的屏幕上会越小。

 

为了解决这个问题，需要引入另外一个概念——设备独立像素 （Device Independent Pixels ）， 用这个方法去告诉不同的设备，某个元素需要显示多少个像素。

设备像素比 （device pixel ratio)： 物理像素对设备独立像素的比值，简称dpr。

在web浏览器中，可以通过调用window.devicePixelRatio获取设备像素比。或者使用css的媒体查询-webkit-device-pixel-ratio, device-pixel-ratio对dpr进行区分。

 

 

移动端开发：

在Android、iOS和Web开发中，样式单位使用的都是设备独立像素。

一般设计师给出的UI图是基于iPhone6，iPhone6的设备像素比为2。比如设计稿给出100px高的元素，那么在dpr为2的设备上，实际该元素高所占据的物理像素为200px。（这里涉及到一个不同机型上的字体强转问题）

px是web开发设计稿中的尺寸单位，即css像素。如果我们不对页面进行缩放，那么一个css像素就是一个设备独立像素。但是如果我们对页面进行放大， 一个css像素会跨越更多物理像素（或设备独立像素）。

所以页面缩放系数 = CSS像素 / 设备独立像素。

 

视口：

视口（viewport）意为当前可视的图像区域。

在电脑上，视口宽度和浏览器宽度保持一致。

而在移动端，视口下还有三个概念——布局视口、视觉视口和理想视口。

通常移动手机宽度较小，比如iPhone12的宽度为390px，而给桌面设计的网站宽度至少为800px。

 

 

比如以上EMS这个视口比较宽的网站在移动端看起来就很挤，字体较小。

在手机上，视口和浏览器宽度并不划等号。为了让手机容纳为桌面端设计的网站，移动设备默认的布局视口宽度远大于屏幕宽度，设为980px、1024px等。这样设置布局视口之后，字体等元素大小正常，页面横向出现滚动条，可以通过滚动条查看页面的其他部分。

常见移动端浏览器的布局视口大小如下：

 

在开发项目中，获取布局视口宽高的方式为document.documentElement.clientWidth和document.documentElement.clientHeight。

 

而视觉视口表示用户能够看到的网站区域，获取视觉视口宽高的方式为window.innerWidth和window.innerHeight。

当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口尺寸不会改变。移动端的缩放不会导致CSS布局被重新计算。由于在手机上会经常发生缩放，并且手机的处理器工作得很慢，电池消耗地很快，因此不重新进行布局对性能来说有很大的好处.

initial-scale指令设置了页面的初始缩放程度。1代表100%，2代表200%。

缩放程度是根据理想视口来计算的: 当前缩放值 = 理想视口宽度 / 视觉视口宽度

 

而现在大部分在移动端使用频繁的网站并不会出现内容挤在一起的情况，这是因为在较窄的屏幕上匹配了一个较窄的网站，

换句话说，布局视口的默认宽度并不是一个理想的宽度，它是对设备来说，最理想的布局视口尺寸。显示在理想视口中的网站拥有最理想的浏览和阅读的宽度，用户刚进入页面时也不再需要缩放。

这就引出了理想视口的概念，只有当网站需要为手机开发时，才应该使用理想视口。

获取理想视口尺寸的方式为screen.width和screen.height。

如果不进行定义，布局视口将为默认大小，可以在meta标签里将布局视口定义为理想视口大小（width = device-width）。这样，开发出的网页将适用于不同的移动设备。

 

这里的meta标签的content内，通常可以设以下内容：

       width:设置布局视口的宽度为特定的值
　　initial-scale:设置页面的初始缩放程度和布局视口的宽度（1.0）
　　minimum-scale:设置了最小缩放程度(用户可缩小的程度) （1.0）
　　maximum-scale:设置了最大缩放程度(用户可放大的程度) （1.0）
　　user-scalable: 是否阻止用户进行缩放 （no）
　　height: 设置布局视口的高度(未被实现)

       viewport-fit=cover （媒体查询的设置）

总结 ：

上面提到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-scale即800px，布局视口取两者最大值即800px。