正开做运动端web开发之同校应该都遇到了页面适配问题，为什么自己在开手机及调节好之页面在旁手机会来这么要那样的体制问题？viewport自家吧安了，为什么要亮不正规？难道自己如果吗各种无绳电话机屏幕写媒体询问，有无发出大概的法，可以不用关爱手机屏幕的差异性呢？
百度中搜寻移动端H5页面适配一言九鼎字，大概可以取180大抵万底寻找结果，由此可见这个题目为抱许多丁的眷顾。本文的目的关键是分析解决移动端H5页面适配问题经过中牵扯到之知识点，然后梳理分析当前普遍的适配解决方案。
由本文内容比较丰富，下面先为来文章的提纲：
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独设备无关像素，每个设备无关像素又要2×2个大体像素点来填充，而图片以每个设备无关像素(px)单位达成提供的像素点只发生1×1独，这时，系统经过一定之算法在及时1单如素点上附近取色，取到4只颜色(这4种颜色接近但是出肯定区别)之后，当成4个像素点，然后填充到1单装备无关像素点上，这样就招致图片展示时混淆，dpr越充分，这种艺术示的图纸越模糊。
示例二
抑或dpr=2的装置，但是准备了一个尺码为200 x 240
(px)的图样，还是用<img>来显示，这时显示的图纸就比较明晰了。
案由：这时图片本身可以在一个设施无关像素单位达成提供2×2只大体像素点，设备展示图片时一直将图片提供的比如素点来填充就得了，不用对诸如素点进行处理，所以可以比较明晰的示图片。
示例三
要dpr=2的装置，这次准备一个尺码400 x 480
(px)的图样，还是用<img>来展示时，这种状态显示的图缺少锐利度，也影响了图的清晰度，但是充分无耻出来。
故：图片本身在一个装置无关像素点单位及提供了4×4个大体像素点，而装备本身就待2×2只大体像素点，所以会见通过削减采样算法，在图纸提供的4×4个大体像素点中，选取颜色接近的2×2只大体像素点填充到装备无关像素点上，所以呢会见发生一定的色差，这种状态下图片尺寸越老，这种色差也便愈明显，但是人眼很不便分这种色差。
小场景靠文字描述可能无法体会
下是自己在oppo的一模一样慢慢悠悠手机及之测试结果，结合当下张效果图虽好很好之明白地方的老三单示范了：
图形适配示例
图形适配最佳实践
一经想高清显示图片，如果基准允许(有单独的图片服务器)最直白的解决办法，肯定是冲设备的dpr，为歧dpr的设备加载不同倍率大小图片显示；没这种原则的要对用户体验没那个高要求的，只能选择同种植折中之方案了，一般情形下就需要提供布局尺寸2倍大小的切图就足以了，也即是止高清适配dpr=2的配备，但是dpr为3要么4底装备展示力量呢能够接受，不便于看下模糊现象。目前主流机型的dpr也就是当2与3期间。
2.2字体大小适配
书适配目标要要看规划要求，主要发生零星种植：
1.不等屏幕下，字体显示大小都一律，即用相当丰厚显示字体；
2.见仁见智屏幕下，一行能显示的篇幅固定，即用按照比例缩放字体大小；
开班分析之前，先押下这简单栽字体适配的演示：
第1种植字体适配方案的示范
手机淘宝以第1栽办法适配字体
第2栽字体适配方案的言传身教
网易新闻应用第2种方法适配字体
下就来具体分析下零星种植字体适配方案的法则与上下。
PS:为了便于分析与晓，下面的辨析是根据的布局宽度等于设备宽度，即viewport的width=device-width的图景下分析的，其他布局宽度下的原理是近似之。
** 第1种植字体适配方案原理 **
于上马分析这种办法的规律之前，先通过一致张图理解下px和dp以及绝对长之间关系。
px的断然长在不同装备下是不同之
由臻图会字体大小只跟css单位px有关，而每个设备上px的绝对化宽度又和设施的断然宽度和绝对宽度达分出底装置无关像素点dp有关；只要设备的横向dp数量与绝对宽度之比值(dp/cm)相同，就可管px在不同装备及显示的断然宽度是同样的；如果dp/cm的比值过大，那么px的断长就见面更换多少，看起就会见露出小；如果dp/cm的比率过小，那么px的绝对长就见面变大，看起就会见显大；一般的话手机屏幕分辨率越强，相同px值的书体看起就会见越加聊。
iphone5和6底dp/cm比值十分近乎，所以12px轻重的书在当下片种无绳电话机及显得的高低基本一样，看不出来区别，但是iphone6+的dp/cm比值要比较iphone5,6的稍好，这便招12px分寸的字在6+上显示的比5，6及显得的微有些，上面的淘宝对比图细辨认可以关押出来。
android的手机屏幕dp/cm比值在挨家挨户设施里吧发差异性，并且比较起多样性。所以一律12px尺寸的字，各个设备显示时为是来异样之。
这种显示差别在iphone系列手机中好忽略不计，但是android碎片化比较严重，完美兼容各种机型没有必要，主流机型受到这种显示差别吗得忽略不计，所以下这种措施开展字体适配只需要px值设置成一样的尽管好了。
** 第1种植字体适配方案优缺点**
长：1.例外装备受到字体大小显示平，比较统一；2.大屏部手机可以来得更多的仿；
缺点：1.由于单个字体宽度是定死的，所以于有点机型下或会见影响页面布局；
** 第2种植字体适配方案原理 **
于规划稿中，计算起字体大小相对于规则字体大小（基准字体大小可以选设计稿宽度，一般为计算好，会将设计稿宽度/10抱的价作为规范字体大小）的比值，然后以不同布局宽度下，先获得规范字体大小，再根据地方计算出来的比值，就好计算出来不同布局宽度下的字体大小，也即是不同布局宽度下齐比例缩放字体。
运rem的特征，在页面的html标签上安装一个尺码字体大小，就可兑现这种方式。
像，宽是750px的设计图中，字体大小是32px，计算起极字体大小为75px，比值为
32 * 10 / 75 = 0.426667。
如若布局宽度是414px，此时法字体大小变成 414 / 10 =
41.4px，然后设置<html
style=”font-size:41.4px”>，字体大小是0.426667rem，计算出来的字体大小为41.4×0.42667=17.66px。
假设布局宽度变成360px，此时准字体大小变成36px，然后设置<html
style=”font-size:36px”>，字体大小仍然用0.426667rem代表，计算出来的字体大小为36×0.42667=15.36px。
750/32 约等于 414/17.66 约等于 360/15.36，这样尽管水到渠成了等于比缩放字体了。
** 第2栽字体适配方案优缺点**
缺陷：1.多少尺寸设备屏幕上字体显示小，大尺寸设备屏幕字体显示大，导致字体显示不等同；2.勿可知表达大屏手机的优势（显示更多之许）；3.字体大小会面世单数或者小数点大小的值，某些字体不支持这些价值，渲染时增加计算量；
优点：1.适配简单，不同装备未会见潜移默化页面布局，可以跟设计稿布局保持一致；
2.3布局宽度适配
布局中对步长之适配，也是运rem来兑现，和地方第2种植字体大小适配方式备受之规律类似，也是精打细算起一个百分比值，然后不同布局宽度中等比缩放，这里偷下懒，不在赘述。
3.适配解决方案分析
当前底缓解方案有少数像样
首先近似即是js动态生成viewport标签，标签中之initial-scale值根据设备的dpr计算，不同dpr设备的viewport值不同。
仲类即是js不操作viewport，每个设备都动优秀viewport来布局。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
** 动态viewport解决方案分析 **
此分析两单动态viewport解决方案：
1.手机淘宝之flexible方案；
2.hotcss方案；
手机淘宝的flexible方案，特点：
1.才针对iphone生成动态viewport，因为目前iphone的dpr只来1，2，3老三栽，android的dpr很有多，不享一致性；
2.字体大小不用rem做缩放处理，仍然使用px单位，设置不同dpr下相应之字体大小；
3.小幅利用rem等较缩放；
4.许强制定义dpr;
运用时页面头部要引入flexible.js.
flexible.js的适配流程分析
hotcss方案，特点：
1.请勿分iphone和android，dpr只取得三种1,2,3，android的dpr做近似处理；
2.增幅和字体采用rem等比较缩放；
3.许强制定义dpr;
下时页面头部要引入hotcss.js
hotcss.js的适配流程分析
动态viewport方案之所以会称呼动态viewport是为，这个适配过程会基于网dpr值设置initial-scale属性的尺寸，大小相当于1/dpr。
** 静态viewport解决方案美学原理分析 **
运rem特性，先根据标注图算有各个因素相对于设计稿宽度之比值，这个比率就作为rem值，然后页面布局时即用算有的rem值表示，并且于html根素设置当前布局页面宽度作为条件。更rem值计算具体的解释可以参见这首文章应用Flexible实现手淘H5页面的顶点适配。通过这种措施设置标签元素的丰厚高，位置与字体大小，这样使rem特性就是可当不同手机屏幕上贯彻等较缩放。
参考资料
https://github.com/amfe/article/issues/17
http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html