移动端适配方案研究

      初次接触移动端的时候，觉得终于能够不用像pc那样考虑使人头疼的ie浏览器兼容问题，有强大的css3的帮助，能够为所欲为。。但是后来才发现原来移动端各类层次不齐的终端更会让人抓耳挠腮，一样的页面在不一样的手机上显示的彻底不同的效果，因而抛开功能，页面适配性也成了一个大的课题。

      说到移动端，下面这一行代码你们必定不陌生：

    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

      若是对viewport还有不理解的能够直接去百度有不少资料，其中，device-width指设备的物理宽度，好比iphone4为320,剩下的initial-scale与maximum-scale指页面缩放值及最大缩放值，user-scalable表示是否容许缩放。

      注意device-width并不等于手机的物理像素，一样宽度的屏幕物理像素可能为320,640，这就是咱们常说的retina屏。固然也就意味着咱们css中的1px多是1个物理像素，也多是2个物理像素，固然就显示来讲咱们设置1px的border不论是在哪一个屏幕下看起来都是显示1px的。

      移动端适配的解决方案大概有几种，现就我所了解的主要方法作个简单总结：    

 

     一.媒体查询

    相信对响应式网站了解的同窗都看过下面的写法：

     @media screen and (max-width: 300px){

          ….

     }

     经过css3的媒体查询，咱们能够对不一样的分辨率设定不一样的样式，如320px（device-width）下字号14px，而375px字号设为16px，等等。

     这样咱们就能够作到简单的适配，不过如今市场机型320,360,375等等各类分辨率，若是咱们每个都去U针对的话，代码量抛开不说，各类计算也会使得效率极其低下。

   

     二.动态改变缩放值

    咱们以前的大神是经过下面这种方法来实现不一样设备的自适应的，例如咱们的设计稿为640px为标准的，那么咱们写页面的时候能够按实际ps中的px来写，而后再页面开头加入以下js（这种方法与淘宝和网易的作法有殊途同归之妙，下面咱们会介绍到）：

 1 var sW=$(window).width();
 2 
 3 if(sW>=640&&sW<720){
 4 
 5        $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.5");
 6 
 7 }else if(sW>=720&&sW<750){
 8 
 9        $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.56");
10 
11 }else if((sW>=750&&sW<800)){
12 
13       $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.58");
14 
15 }else if(sW>=800&&sW<1000){
16 
17      $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.65");
18 
19 }

 

 

     基本思想为以640为基准，当在标准iphone4的时候页面总体缩放0.5，而后再遇到不一样分辨率的时候赋予不一样的缩放值，例如对于device-width为375的状况下，最大缩放值设为375/320*0.5。

     这种方法的优势是咱们能够彻底按照设计稿来设定css尺寸，经过js的计算来实现不一样机型的适配。固然缺点就是你当咱们嵌入第三方页面或者将咱们的页面嵌入第三方时，因为缩放值的不一样会出现兼容性问题。

 

     三.rem自适应

    咱们都知道rem不一样于em相对于父元素的字体，rem是相对于html根字体来设置的，也就是假设html字体设为16px，那么设置为1rem的元素不论父级元素是哪一层都至关于设置了字体font-size:16px，咱们来看一看淘宝和网易的页面：

     iphone4：font-size设为64px，缩放值为0.5

 

       iphone6：font-size设为75px，缩放值为0.5

     

      咱们再来看下元素设置：

    

        除字体外，其余单位都用rem，这样经过动态的计算html的px，页面内容也会作相应比例的变化，字体用px显示。固然，他们的理念是大屏就要显示更多的字体。

       关于字体有一个疑问始终没有搞明白，看下面几个图：

        data-dpr=1，安卓机，字体设为12px，缩放值为1

   

        data-dpr=2，iphone6，字体设为24px，缩放值为0.5

        data-dpr=3，iphone6 plus，字体设为36px，缩放值为0.333

    

      看上面3个截图，能够看到，经过不一样的dpr，为html赋予了不一样的data-dpr属性，而后根据不一样的屏幕设置字体属性和缩放倍数，如1倍屏12px，缩放为1,2倍屏缩放为0.5,3倍屏缩放为0.3333，不清楚这样作的目的是什么，貌似缩放乘以倍数是同样的效果，也就是能够用一种设置来实现，不知道理解的是否是有问题？忘大神告知。

      关于淘宝h5兼容，这里有详细的介绍。使用Flexible实现手淘H5页面的终端适配

 

      下面来看下网易的适配：

       安卓1倍屏，device-width为384，html字体设置为51.2

 

         iphone2倍屏，device-width为320，html字体设置为42

         iphone3倍屏，device-width为414，html字体设置为55px

     

       网易的缩放值始终为1，并且全部属性包括字号都是用rem来设置，不一样于淘宝，网易客户端在各类终端显示内容始终是一致的，这和咱们上面讲过的动态改变缩放值是同样的。选定一种宽度为标准，而后其余机型的设置即为标准机型*比例值。

       至少就我的来讲，我更喜欢网易的这种适配方案，这样能够保证个人页面在每一个机型上都是同样的效果。

      经过分析上面的几种方法，咱们能够简单写一个方法，固然下面方法尚未通过大量测试，只讲方法，慎用

 1 function autoSize(width){  
 2 
 3     //若是咱们设计稿为750，则传入750，不然都认为是640       
 4     var width=width?width:640;
 5 
 6     //为了便于计算，在参照宽度下设html字号为100px，
 7 
 8     var units=width/100;     
 9     var width=document.documentElement.clientWidth;
10     width=width>1080?1080:width;   //设定最大值
11     width=width<=240?240:width;   //设定最小值
12     var calFontSize=width/units;   //计算html字体的字号
13    14     document.documentElement.style.fontSize=calFontSize+'px';
15 }
16 autoSize();
17 window.onresize=function(){
18     autoSize()
19 }