仅用于自我学习
转载自:前端大全
前言
移动互联网发展至今,各种移动设备应用而生,但它们的物理分辨率可以说是五花八门,一般情况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
。