移动端H5页面适配问题研究

更新时间:2021-03-05 14:24:16点击次数:313次
1.适配的基础知识
1.1理解移动端单位
1.2理解viewport
2.页面中那些内容需要适配
2.1图片高清适配
2.2字体大小适配
2.3布局宽度适配
3.适配解决方案分析
---这里是分隔符,正文开始---
1.适配的基础知识
1.1理解单位
px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi
不知道正在看文章的你对上面列出来的这些单位是不是很熟悉,如果是的话,就可以跳过了。
理解这些单位的用法以及区别,对理解移动端页面适配有很大的帮助。为了让你对上面的单位有个大体的认知,这里把上面的单位分成了三类:
如果你是ios开发,你需要了解的单位:pt,px,ppi;实际开发中用到的单位:pt。
如果你是android开发,你需要了解的单位:dip/dp,sp,px,dpi/ppi,ldpi,mdpi,hdpi,xhdpi,xxhdpi;实际开发中用到的单位:dp,sp。
如果你是前端开发,你需要了解的单位:px,em,rem,dpr;实际开发中用到的单位:px,em,rem,dpr
下面分别对每个单位展开分析:
*** dpi / ppi ***
** dpi ** , dot per inch ,每英寸的点数;打印或印刷领域使用的单位,代表打印机每英寸可以打印出的点数 。
ppi, pixel per inch ,每英寸的像素数,像素密度;表示图像或者显示器单位面积上像素数量。
dpi 和 ppi 都是描述分辨率的单位,但是两者是有区别的,但是在描述手机分辨率时,可以认为两者意义相同,以前android设备偏向于使用dpi,ios设备偏向于使用ppi,目前android和ios统一使用ppi描述手机屏幕的像素显示密度。
ppi的计算方法:
计算ppi
*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***
android对移动设备不同屏幕分辨率的分类。
屏幕分辨率分类
*** pt,pc,sp ***
** pt ** ,磅(point的音译),印刷中使用的表示字型的大小单位,1inch = 72pt (印刷中这个关系成立,ios中不成立),ios开发中使用的逻辑单位,是和设备无关的单位。
** pc ** 印刷中使用的单位,1pc = 12pt,不需要关注。
** sp **, scale independent pixel ,android设备中用来显示字体大小的,和设备无关的尺寸,当设置字体大小单位为sp时,android系统字体大小会影响设置的字体渲染时的大小。
*** dip / dp ***
** dp/dip**, device independent pixel,表示设备独立像素,和设备无关的尺寸,相同的dp/dip值,不同设备展示的效果是一样的。
android使用的单位,之前偏向使用dip,目前建议使用dp。
android设备中,规定160ppi的屏幕,1dp = 1px;320ppi的屏幕,1dp = 2px,所以android设备中dp的计算方法:dp = px * (ppi / 160),这里的px是指设备的物理像素点。
和ios开发中用的pt单位类似。
*** px ***
** px ** ,像素,有两种像素概念,一种是网页设计中使用的css像素,一种是原生移动系统使用的物理像素。
作为css像素时,表示的也是一种设备无关单位,与android中使用的dp类似,默认情况下与系统分辨率下的像素大小相同,标清设备中,一个css像素和一个设备物理像素大小相同;在高清设备中,一个css像素可以大于或者等于多个设备物理像素,具体一个css像素,需要多少个物理像素来展示,浏览器会根据dpr计算。
原生移动系统中使用px单位时,表示的就是屏幕的物理像素点,每种屏幕的物理像素点大小可能不一样。
*** dpr ***
** dpr ** ,device pixel ratio, 横向或者纵向设备物理像素数量与设备独立像素数量的比值,浏览器中可以通过window.devicePixelRatio获取(存在兼容性问题)。
对于原生app,ios和android系统会自动根据dpr计算出渲染时需要的px值,最终不同屏幕上展示出来的大小很接近;而移动端页面渲染时想要做到这一点,就必须首先得到设备的dpr,然后再根据dpr计算渲染需要的px值。
ios设备中iphone3的dpr为1;iphone4,5,6,7的dpr为2;iphone6+,7+的dpr为3。iphone6+和iphone7+实际计算出来的dpr应该时2.6左右,但是官方还是建议dpr为3,这是因为ios系统利用了一种“缩减像素采样”算法,自动缩减到2.6。
android设备中dpr值有多种,可知的有0.75,1,1.5,1.75,2,2.5,2.75,3,4等。
*** em,rem ***
** em ** 相对单位,CSS2引入的单位,作为字体大小使用时和百分比单位类似,都是相对于最近的父元素设置的字体大小,在body上设置字体大小为100%和设置字体大小为1em是一样的效果,默认情况下浏览器的字体大小为16px,这样只要浏览器默认得字体大小不变,1em = 16px。
** rem ** 相对单位,root em,CSS3新增的单位,作用和em类似,唯一的区别就是em是相对父元素的,rem是相对html根节点的,即所有使用rem单位的子元素的字体大小都是相对根节点的,所以使用rem可以避免使用em带来的子元素字体大小逐层复合的连锁反应。
更多关于em,rem的知识参见这篇文章理解web开发中的em单位和rem单位。
*** 分辨率 ***
平时说的手机屏幕分辨率,也称为物理分辨率或者原生分辨率,通常包括纵向分辨率和横向分辨率,例如iphone6的物理分辨率是1334 x 750,其中纵向分辨率是1334px,横向分辨率是750px,表示纵向方向可以显示1334个物理像素点,横向上可以显示750个物理像素点,这里描述分辨率使用的px单位,和css中使用的px单位意义不一样,这里代指物理设备的像素点。
还有一种分辨率叫做系统分辨率,例如iphone6的系统分辨率是667 x 375,其中高度是667pt,宽度是375pt,这里描述分辨率使用了pt单位,是一种设备无关单位。
屏幕尺寸相同的设备,物理分辨率越高,ppi也就越大,绝对单位面积上展示的物理像素数量越多,展示图片也就越细腻。
苹果把ppi > 300的屏幕称为视网膜屏,Retina屏。
1.2理解viewport
传统桌面web页面布局通常是定宽布局,但是定宽布局的方式对移动端却不适用,原因手机屏幕尺寸大小各异,定宽布局可能在某些手机上出现横向滚动条,导致阅读效果比较差。
为了让手机有更好的网页浏览体验,苹果引入了viewport,为页面提供了一个虚拟的布局窗口,在这个虚拟的布局窗口中渲染页面,然后系统会把渲染好的页面自动缩放到手机屏幕大小。
虽然viewport还没有成为正式的规范,但是现在绝大部分浏览器都支持viewport。
在桌面浏览器中,viewport严格等于浏览器窗口大小,页面渲染时,页面宽度不会超过浏览器的宽度。
移动端屏幕太窄,为了提供更好的页面体验,移动端提供了两种viewport:可视viewport,布局viewport。
可视viewport就是当前屏幕正在展示的区域,也就是移动设备屏幕的宽度,宽高通过window.innerWidth和window.innerHeight获取(存在兼容性问题)。
布局viewport,页面布局实际用到的viewport,通常比可视viewport要宽,宽高通过document.documentElement.clientWidth和document.documentElement.clientHeight获取。
移动端还有一种viewport概念,可以理解为理想viewport,作用就是在理想viewport下,不同移动设备,展示的字体大小接近,并且不需要用户缩放就可以展示全部的页面内容。
理想viewport的宽度默认等于可视viewport的宽度,但是对同一台设备来说,这个理想viewport的宽度是可以改变的,而可视viewport的宽度是不可变的。
如何使用理想viewport来布局页面呢?只需要设置viewport的width等于device-width。
viewport的属性,推荐使用以及支持度较广泛的属性只有6个:width,height,initial-scale,maximum-scale,minimum-scale,user-scalable。
width 设置viewport布局宽度,内核是webkit的浏览器默认值是980px,取值范围在200-10000px,也可以取值为设备宽度device-width(等于横向设备无关像素数量)。
height 设置viewport布局高度,默认值依赖设备长宽比以及宽度值,取值范围在223-10000px,也可以取值为设备高度device-height。
initial-scale 设置初始缩放比例,页面第一次加载时的缩放比例。默认比例依赖于显示密度。在密度低于200 dpi的显示设备上,比例为1.0。在密度介于200及300 dpi之间的显示设备上,比例为1.5。对于具有300 dpi以上密度的显示设备,比例为密度/150 dpi向下取整的结果。取值范围由maximum-scale属性以及minimum-scale属性决定。如果设置initial-scale值为1,width默认是device-width,height默认是device-height
initial-scale设置的缩放大小会改变理想viewport的大小,不会改变可视viewport的大小,也不会改变布局viewport的大小,这是某些适配方案依赖的基本原理,也是解决1px问题的关键。后面分析适配方案时,动态viewport适配方案就依赖这个知识点。
maximum-scale 允许用户缩放到的最大比例,默认值是0.5,范围从0到10.0。
minimum-scale 允许用户缩放到的最小比例,默认值是5.0,范围从0到10.0。
user-scalable 用户是否可以手动缩放,值可以是:yes/true允许用户缩放;no/false不允许用户缩放。
2.页面中那些内容需要适配
2.1图片高清适配
图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。
页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关,下面会通过三个例子来说明这个问题。
***示例一 ***
例如dpr=2的设备,1个设备无关像素(android中的1dp,ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片,如果用<img>来展示,图片显示时会产生模糊现象。
原因:渲染图片时,宽度是100px,所以横向会占用100个设备无关像素,高度是120px,所以纵向会占用120个设备无关像素,每个设备无关像素又需要2x2个物理像素点来填充,而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个,这时,系统通过一定的算法在这1个像素点上就近取色,取到4个颜色(这4种颜色接近但是有一定区别)之后,当成4个像素点,然后填充到1个设备无关像素点上,这样就导致图片显示时模糊,dpr越大,这种方式显示的图片越模糊。
示例二
还是dpr=2的设备,但是准备了一个尺寸为200 x 240 (px)的图片,还是用<img>来展示,这时显示的图片就比较清晰了。
原因:这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点,设备展示图片时直接拿图片提供的像素点来填充就可以了,不用对像素点进行处理,所以可以比较清晰的显示图片。
示例三
还是dpr=2的设备,这次准备一个尺寸400 x 480 (px)的图片,还是用<img>来展示时,这种情况展示的图片缺少锐利度,也影响了图片的清晰度,但是很难看出来。
原因:图片本身在一个设备无关像素点单位上提供了4x4个物理像素点,而设备本身只需要2x2个物理像素点,所以会通过缩减采样算法,在图片提供的4x4个物理像素点中,选取颜色接近的2x2个物理像素点填充到设备无关像素点上,所以也会产生一定的色差,这种情况下图片尺寸越大,这种色差也就越明显,但是人眼很难区分这种色差。
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息