移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题:
1px
问题UI
图完美适配方案iPhoneX
适配方案上面这些问题可能我们在开发中已经知道如何解决,但是问题产生的原理,以及解决方案的原理可能会模糊不清。在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、PPI
、DPI
、DP
、DIP
、DPR
、视口等等,你真的能分清这些概念的意义吗?
本文将从移动端适配的基础概念出发,探究移动端适配各种问题的解决方案和实现原理。
一般用英寸描述屏幕的物理大小,如电脑显示器的17
、22
,手机显示器的4.8
、5.7
等使用的单位都是英寸。
需要注意,上面的尺寸都是屏幕对角线的长度:
像素即一个小方块,它具有特定的位置和颜色。
图片、电子屏幕(手机、电脑)就是由无数个具有特定颜色和特定位置的小方块拼接而成。
像素可以作为图片或电子屏幕的最小组成单位。
下面我们使用sketch
打开一张图片,将这些图片放大即可看到这些像素点:
通常我们所说的分辨率有两种,屏幕分辨率和图像分辨率。
屏幕分辨率指一个屏幕具体由多少个像素点组成。
iPhone XS Max
和 iPhone SE
的分辨率分别为2688 x 1242
和1136 x 640
。这表示手机分别在垂直和水平上所具有的像素点数。
当然分辨率高不代表屏幕就清晰,屏幕的清晰程度还与尺寸有关。
我们通常说的图片分辨率
其实是指图片含有的像素数
,比如一张图片的分辨率为800 x 400
。这表示图片分别在垂直和水平上所具有的像素点数为800
和400
。
同一尺寸的图片,分辨率越高,图片越清晰。
PPI(Pixel Per Inch)
:每英寸包括的像素数。
PPI
可以用于描述屏幕的清晰度以及一张图片的质量。
使用PPI
描述图片时,PPI
越高,图片质量越高,使用PPI
描述屏幕时,PPI
越高,屏幕越清晰。
在上面描述手机分辨率的图片中,我们可以看到:iPhone XS Max
和 iPhone SE
的PPI
分别为458
和326
,这足以证明前者的屏幕更清晰。
DPI(Dot Per Inch)
:即每英寸包括的点数。
这里的点是一个抽象的单位,它可以是屏幕像素点、图片像素点也可以是打印机的墨点。
平时你可能会看到使用DPI
来描述图片和屏幕,这时的DPI
应该和PPI
是等价的,DPI
最常用的是用于描述打印机,表示打印机每英寸可以打印的点数。
一张图片在屏幕上显示时,它的像素点数是规则排列的,每个像素点都有特定的位置和颜色。
当使用打印机进行打印时,打印机可能不会规则的将这些点打印出来,而是使用一个个打印点来呈现这张图像,这些打印点之间会有一定的空隙,这就是DPI
所描述的:打印点的密度。
在上面的图像中我们可以清晰的看到,打印机是如何使用墨点来打印一张图像。
所以,打印机的DPI
越高,打印图像的精细程度就越高,同时这也会消耗更多的墨点和时间。
实际上,上面我们描述的像素都是物理像素
,即设备上真实的物理单元。
下面我们来看看设备独立像素
究竟是如何产生的:
智能手机发展非常之快,在几年之前,我们还用着分辨率非常低的手机,比如分辨率是320x480
,我们可以在上面浏览正常的文字、图片等等。
但是,随着科技的发展,低分辨率的手机已经不能满足我们的需求了。很快,更高分辨率的屏幕诞生了,比如640x940
,正好是两倍。
理论上来讲,在白色手机上相同大小的图片和文字,在黑色手机上会被缩放一倍,因为它的分辨率提高了一倍。这样,岂不是后面出现更高分辨率的手机,页面元素会变得越来越小吗?
然而,事实并不是这样的,我们现在使用的智能手机,不管分辨率多高,他们所展示的界面比例都是基本类似的。乔布斯在iPhone4
的发布会上首次提出了Retina Display
(视网膜屏幕)的概念,它正是解决了上面的问题,这也使它成为一款跨时代的手机。
在iPhone4
使用的视网膜屏幕中,把2x2
个像素当1
个像素使用,这样让屏幕看起来更精致,但是元素的大小却不会改变。
如果手机使用了视网膜屏幕的技术,那么显示结果应该是下面的情况,比如列表的宽度为300
个像素,那么在一条水平线上,老手机会用300
个物理像素去渲染它,而新手机实际上会用600
个物理像素去渲染它。
我们必须用一种单位来同时告诉不同分辨率的手机,它们在界面上显示元素的大小是多少,这个单位就是设备独立像素(Device Independent Pixels
)简称DIP
或DP
。上面我们说,列表的宽度为300
个像素,实际上我们可以说:列表的宽度为300
个设备独立像素。
打开chrome
的开发者工具,我们可以模拟各个手机型号的显示情况,每种型号上面会显示一个尺寸。
比如iPhone X
显示的尺寸是375x812
,实际iPhone X
的分辨率会比这高很多,这里显示的就是设备独立像素。
设备像素比device pixel ratio
简称dpr
,即物理像素和设备独立像素的比值。
在web
中,浏览器为我们提供了window.devicePixelRatio
来帮助我们获取dpr
。
在css
中,可以使用媒体查询min-device-pixel-ratio
,区分dpr
:
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }
在React Native
中,我们也可以使用PixelRatio.get()
来获取DPR
。
当然,上面的规则也有例外,iPhone 6、7、8 Plus
的实际物理像素是1080 x 1920
,在开发者工具中我们可以看到:它的设备独立像素是414 x 736
,设备像素比为3
,设备独立像素和设备像素比的乘积并不等于1080 x 1920
,而是等于1242 x 2208
。
实际上,手机会自动把1242 x 2208
个像素点塞进1080 * 1920
个物理像素点来渲染,我们不用关心这个过程,而1242 x 2208
被称为屏幕的设计像素
。我们开发过程中也是以这个设计像素
为准。
实际上,从苹果提出视网膜屏幕开始,才出现设备像素比这个概念,因为在这之前,移动设备都是直接使用物理像素来进行展示。
紧接着,Android
同样使用了其他的技术方案来实现DPR
大于1
的屏幕,不过原理是类似的。由于Android
屏幕尺寸非常多、分辨率高低跨度非常大,不像苹果只有它自己的几款固定设备、尺寸。所以,为了保证各种设备的显示效果,Android
按照设备的像素密度将设备分成了几个区间:
当然,所有的Android
设备不一定严格按照上面的分辨率,每个类型可能对应几种不同分辨率,所以,每个Android
手机都能根据给定的区间范围,确定自己的DPR
,从而拥有类似的显示。
当然,仅仅是类似,由于各个设备的尺寸、分辨率上的差异,设备独立像素也不会完全相等,所以各种Android
设备仍然不能做到在展示上完全相等。
在写CSS
时,我们用到最多的单位是px
,即CSS像素
,当页面缩放比例为100%
时,一个CSS像素
等于一个设备独立像素。
但是CSS像素
是很容易被改变的,当用户对浏览器进行了放大,CSS像素
会被放大,这时一个CSS像素
会跨越更多的物理像素。
页面的缩放系数 = CSS像素 / 设备独立像素
。
视口(viewport
)代表当前可见的计算机图形区域。在Web
浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI
, 菜单栏等——即指你正在浏览的文档的那一部分。
一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口,它们在屏幕适配中起着非常重要的作用。
布局视口在移动端展示的效果并不是一个理想的效果,所以理想视口(ideal viewport
)就诞生了:网站页面在移动端展示的理想大小。
如上图,我们在描述设备独立像素时曾使用过这张图,在浏览器调试移动端时页面上给定的像素大小就是理想视口大小,它的单位正是设备独立像素。
<meta>
元素表示那些不能由其它HTML
元相关元素之一表示的任何元数据信息,它可以告诉浏览器如何解析页面。
我们可以借助<meta>
元素的viewport
来帮助我们设置视口、缩放等,从而让移动端得到更好的展示效果。
上面是viewport
的一个配置,我们来看看它们的具体含义:
Value
可能值
描述
width
正整数或device-width
以pixels
(像素)为单位, 定义布局视口的宽度。
height
正整数或device-height
以pixels
(像素)为单位, 定义布局视口的高度。
initial-scale
0.0 - 10.0
定义页面初始缩放比率。
minimum-scale
0.0 - 10.0
定义缩放的最小值;必须小于或等于maximum-scale
的值。
maximum-scale
0.0 - 10.0
定义缩放的最大值;必须大于或等于minimum-scale
的值。
user-scalable
一个布尔值(yes
或者no
)
如果设置为 no
,用户将不能放大或缩小网页。默认值为 yes。
为了在移动端让页面获得更好的显示效果,我们必须让布局视口、视觉视口都尽可能等于理想视口。
device-width
就等于理想视口的宽度,所以设置width=device-width
就相当于让布局视口等于理想视口。
由于initial-scale = 理想视口宽度 / 视觉视口宽度
,所以我们设置initial-scale=1;
就相当于让视觉视口等于理想视口。
这时,1个CSS
像素就等于1个设备独立像素,而且我们也是基于理想视口来进行布局的,所以呈现出来的页面布局在各种设备上都能大致相似。
浏览器为我们提供的获取窗口大小的API
有很多,下面我们再来对比一下
window.innerHeight
:获取浏览器视觉视口高度(包括垂直滚动条)。window.outerHeight
:获取浏览器窗口外部的高度。表示整个浏览器窗口的高度,包括侧边栏、窗口镶边和调正窗口大小的边框。window.screen.Height
:获取获屏幕取理想视口高度,这个数值是固定的,设备的分辨率/设备像素比
window.screen.availHeight
:浏览器窗口可用的高度。document.documentElement.clientHeight
:获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距。document.documentElement.offsetHeight
:包括内边距、滚动条、边框和外边距。document.documentElement.scrollHeight
:在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与clientHeight
相同:它包含元素的内边距,但不包括边框,外边距或垂直滚动条。尽管我们可以使用设备独立像素来保证各个设备在不同手机上显示的效果类似,但这并不能保证它们显示完全一致,我们需要一种方案来让设计稿得到更完美的适配。
lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方案。
下面我们来看看现在最流行的vh、vw
方案。
vh、vw
方案即将视觉视口宽度 window.innerWidth
和视觉视口高度 window.innerHeight
等分为 100 份。
上面的flexible
方案就是模仿这种方案,因为早些时候vw
还没有得到很好的兼容。
vw(Viewport's width)
:1vw
等于视觉视口的1%
vh(Viewport's height)
:1vh
为视觉视口高度的1%
vmin
: vw
和 vh
中的较小值vmax
: 选取 vw
和 vh
中的较大值如果视觉视口为375px
,那么1vw = 3.75px
,这时UI
给定一个元素的宽为75px
(设备独立像素),我们只需要将它设置为75 / 3.75 = 20vw
。
这里的比例关系我们也不用自己换算,我们可以使用PostCSS
的 postcss-px-to-viewport
插件帮我们完成这个过程。写代码时,我们只需要根据UI
给的设计图写px
单位即可。
当然,没有一种方案是十全十美的,vw
同样有一定的缺陷:
px
转换成vw
不一定能完全整除,因此有一定的像素差。vw
,margin
采用px
时,很容易造成整体宽度超过100vw
,从而影响布局效果。当然我们也是可以避免的,例如使用padding
代替margin
,结合calc()
函数使用等等…手机扫一扫
移动阅读更方便
你可能感兴趣的文章