不知不觉做了两年前端，从PC端、移动端、微信小程序一直到今天刚刚开放注册的快应用（新的手机厂商对抗小程序的技能，所以注册时如果使用QQ邮箱，就得去垃圾桶找注册邮箱），前端圈子的快速发展很受追捧大前端的发展，此时是快应用的手机厂商。开放应用入口和系统推广引流入口。这些新能力为前端开发者带来了更强的实战能力。我们在开发PC站点的时候，往往会花很多时间在浏览器兼容性问题上。说到移动端，以webkit为核心的Safari和Chrome会舒服很多。但是，我们不得不适应市场上各种分辨率的手机。刚开始接触移动开发时，我们有些措手不及，尤其是去年年中之前微信内置浏览器老版本使用的X5内核。网友们戏称它为移动端IE……今天的话题是关于我的移动端多端适配的解决方案和移动端适配布局的知识总结。下面正式开始。基本概念和原理首先要了解的重要基础知识点：物理像素、设备独立像素、设备像素比、css像素、布局视口、视觉视口、理想视口和css单位rem。物理像素（设备像素）屏幕的物理像素也称为设备像素。任何设备屏幕的物理像素都是在出厂时确定的并且是固定的。Device-independentpixel设备无关像素也可以理解为CSS像素，可以认为是计算机坐标系中的一个点，这个点代表一个虚拟像素（比如CSS像素），可以被一个程序。设备像素比设备像素比简称dpr，dpr=物理像素/设备独立像素。（以iphone6为例：dpr=750/375，所以它的像素密度比为2，即1个CSS像素跨越2个物理像素），我们可以通过window.devicePixelRatio获取设备的像素密度，pixeldensity大于1为高清屏。CSS像素是CSS和JS中使用的长度单位，单位是px。注意：PC端1个物理像素等于1px，但移动端1个物理像素不一定等于1px（高清屏）。layoutviewport（布局视口可以看作是html元素的上层容器，即顶层容器。默认情况下或者当html元素的width属性设置为100%时，它会占据顶层容器，此时使用document.documentElement.clientWidth获取html元素的布局宽度，即布局视口的宽度，使用媒体查询时，max-width和min-的值width也指的是布局视口的宽度，在html中，meta中的名字一般是viewport字段，就是控件的布局视口，布局视口一般是浏览器厂商给的一个值，在移动互联网之前普及了，网上的大部分页面都是为了电脑端浏览而做的，没有移动端的适配。手机端，但是电脑端的页面宽度比较大，移动端的宽度有限。如果你想看整个网页，会有一个长长的滚动条。这很麻烦。因此，为了让用户在小屏幕上也能很好地显示网页，浏览器厂商将布局视口设置为较大的尺寸，一般在768px到1024px之间，最常用的宽度是980。这样一来，用户就可以看到大部分内容，并根据具体内容选择缩放。所以layoutviewport是不可见的，浏览器厂商设置一个固定的值，比如980px，将980px的内容放大到手机屏幕上。一块手机屏幕，物理像素的数量是固定的。视觉视口的大小继承自布局视口的大小。视觉视口和布局视口的宽度是CSS的px数（变量）。理想的视口布局视口虽然解决了移动端查看PC端网页的问题，但却完全忽略了手机本身的尺寸。因此苹果推出了idealviewport，这是设备最理想的布局视口，用户无需修改页面缩放即可完美展示整个页面。最简单的方法是将布局视口的宽度设置为手机屏幕的宽度。移动端如何适配不同屏幕？最简单的方法是设置以下视口：评论：dpr=物理像素/设备独立像素。以iphone6为例，iphone6的物理像素为750，如果不设置layoutviewport，此时layoutviewport视口默认为980px：dpr=750/980=0.76531，等于0.765311个CSS像素中的物理像素。密度接近1个像素，所以PC端的页面在移动端看也不会太小。当在meta中设置如下配置时：相当于将布局视口设置为设备的宽度（即与设备无关的像素），而iphone6的设备无关像素是375px。此时：dpr=750/375=2，等于1个CSS像素有2个物理像素。这时候在移动端用PC端的尺寸查看，字体和元素会特别大。现在的移动端设计稿都是根据iphone的设计，一般是750px或者640px，对应iphone6和iphone5的物理像素。在设计稿中，一个1px的像素边框对应1个物理像素。在iphone5和iphone6中，当layoutviewportwidth=device-width时，css的1px显示2个物理像素，所以用户看到的是2px的边框。如何解决？1px边框效果其实有很多hack方法，其中之一就是缩放视口。viewportscalinginitial-scale用于布局viewinitial-scale是相对于idealviewport的，即initial-scale=1和width=device-width效果一样。initial-scale=0.5相当于width=2乘以device-width，所以同时设置initial-scale和width可以改变布局视口的大小。可视化视口的缩放可以理解为用户用两根手指缩放页面。当用户缩小页面时，视觉视口变大，用户可以看到更多的东西。嘴巴越小，用户看到的就越少。对于iphone6，加入以上设置后，initial-scale=0.5。布局视口：375px*2=750px；所以此时布局视口为750px，此时1px等于1个物理像素。（移动端一个pixel有很多hack，比如使用伪类，svg等）看到这里是不是觉得要消化的知识点很多，不怕，休息一下消化消化，大家就这样过来了。猥琐开发~各种适配方案探索设计师给出ui图的时候，面对市面上各种各样的手机，屏幕尺寸不一样，dpr也不一样，屏幕尺寸也是各种尺寸，那我们该怎么办呢？做对了吗？全面还原ui设计让项目跑遍各种手机？为了解决这种情况，出现了很多适配方案。每种方案的实施方式不同，还原程度也不同。下面总结几种常见的适配方案及其原理。方案一：固定高度，宽度自适应。这也是我接触移动端适配时第一次使用该方案。此解决方案使用理想视口，使布局视口等于设备宽度。在布局中垂直使用固定px值，Landscape使用自适应布局（百分比、felx、小评级）。这个方案比较简单，ui还原度比较低。方案二：固定布局视口广度，使用viewport进行缩放（网易、荔枝FM）if(/Android(\d+\.\d+)/.test(navigator.userAgent)){varversion=parseFloat(RegExp.$1);如果(版本>2.3){varphoneScale=parseInt(window.screen.width)/640;if(/MZ-M571C/.test(navigator.userAgent)){document.write('');}elseif(/M571C/.test(navigator.userAgent)&&/LizhiFM/.test(navigator.userAgent)){document.write('');}else{document.write('');}}else{document.write('');}}else{document.write('');}固定布局视口，宽度设置固定值，总宽度为640px，视口根据屏幕宽度动态生成（设计稿宽度为640px）。本布局方案页面宽度始终为640px，通过设置缩放比例实现适配：varscale=window.screen.width/640;当设计稿为640px时，我们可以直接用1:1px来写像素单位。此布局方案中的1px不一定等于1px。当设备是iphone6时，1px(css)=window.screen.widthdpr=640=3752/640=1.171875(设备物理像素)这种荔枝FM的适配方案使用的是target-densitydpi，这是一个会被丢弃的属性，所以不推荐这种方案（学习思路也不错）。方案三：根据不同屏幕动态写入font-size，以rem为宽度单位，固定viewport的布局。（网易新闻）首先设置理想视口：接下来计算html元素的font-size，将可见视口的宽度乘以一个系数：理论上这个系数可以是任意值，假设系数为1，则html元素的font-size等于1rem可见视口的宽度。这时候rem中的长度nrem可以理解为可见视口长度的n倍。当此系数为0.01时，1rem等于可见视口宽度的1/100。它等于布局视口宽度的1/100，也就是1vw。在实际使用过程中，该系数的选择尽可能方便。将设计稿的长度值转化为css中的长度值。以iphone6的物理像素数为标准），100为预期转化率，即设计稿中100px的长度对应css中的1rem，设计稿中的长度值除以100得到css长度rem的值，将设计稿宽度换算成css长度rem，单位应为(750/100)rem，设计稿宽度对应visualviewport,即(750/100)rem=visualviewportwidth,1rem=visualviewportwidth*(100/750),(100/750)是我们要设置html元素的font-size的系数页面初始化时：宽度为750的设计稿：document.documentElement。style.fontSize=window.innerWidth/7.5+'px';640宽设计稿：document.documentElement.style.fontSize=window.innerWidth/7.5+'px';该方案可以按百分比还原设计稿。方案四：根据不同的屏幕动态写入font-size和viewport，以rem为宽度单位。将屏幕分成10个固定块：varwidth=document.documentElement.clientWidth;//屏幕布局视口宽度varrem=width/10;//将layoutviewport分成10份，这样在任何一个屏幕下，总长度都是10rem。1rem对应的值不固定，与屏幕的布局视口宽度有关。动态缩放视图：vardevicePixelRatio=window.devicePixelRatio;varisIPhone=window.navigator.appVersion.match(/iphone/gi);vardpr，规模；if(isIPhone){if(devicePixelRatio>=3){dpr=3;}elseif(devicePixelRatio>=2){dpr=2;}否则{dpr=1;}}else{dpr=1;}scale=1/dpr;1、scale=1表示不进行缩放处理。这个方案和第三个方案类似，增强视口缩放使得iPhone上1px(css)=1px(物理像素)。该方案可以按百分比还原设计稿。flexible实现手机淘宝H5的终端适配方案五：可以看看我的总结：大魔君最新的vw移动端适配方案终于看到这里了。可以适配自己开发的项目(～￣▽￣)～看你～
