HTML5移动页面适配方法

  之前做过PC页面时考虑最多的是兼容，这是因为浏览器之间的差异引起的。而移动端是基本没有“兼容”的问题了，全是CSS3，是不是很开心，但是开心早了，因为适配的问题来了，痛哭~~~

  什么是“适配”？简单除暴点讲就是当我们开始做移动端页面的时候，设计师给了一份宽度为750px的设计图。那么，我们把这份设计图实现在各个手机上的过程就是“适配”。

目前移动端做适配有四种方法：

• 一、CSS3媒体查询

  采用CSS3媒体查询可以为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度大于375px的页面中的class="content"的元素设置样式，可以这样写，@media screen and (min-width=375px) {.content { styles }};

  移动设备显示尺寸大全 之CSS3媒体查询：

    @media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}

    @media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}

    @media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}

    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*兼容iphone6*/ }

    @media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}

    @media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}

    @media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}

    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*兼容iphone6+*/ }

    @media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}

    @media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}

    @media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}

    @media screen and ( min-width: 639px){/*640px显示屏样式*/}

    @media screen and ( min-width: 640px){/*640px以上显示屏样式*/}

    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ /*魅族*/  }

    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ /*mate7*/  }

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone4/4s */; }

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone5 */; }

• 二、使用meta标签法

  理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

  我们先来看看该标签的含义：

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

  这里的content中的“width” 这个width指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现，安卓设备尺寸差异很大，光主流的就有宽度为 320、480、720、1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。

  JS核心代码：

    var phoneWidth =  parseInt(window.screen.width);

    var phoneScale = phoneWidth/750;

    var ua = navigator.userAgent;

    if (/Android (\d+\.\d+)/.test(ua)){

      var version = parseFloat(RegExp.$1);

      if(version>2.3){

        document.write('<meta name="viewport" content="width=750, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">');

      }else{

       document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');

      }

    } else {

     document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');

    }

• 三、百分比适配

  用百分比做适配的方法是子元素相对于父元素的百分之多少，比如父元素的宽度为100px;设置子元素的宽度可为60%;这时子元素的宽为60px;如父元素的宽度改为200px时，这时子元素的宽就是120px; 所以可将body默认宽度设置为屏幕宽度（PC中指的是浏览器宽度），子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

• 四、使用rem来做适配

  rem是将根节点html的font-size的值作为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。基于此，我们用rem来实现不同尺寸屏幕的自适应的方法就是：在页面载入开始时首先判断window的宽度Width（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width）），若假定屏幕宽度为750的，而不同宽度的屏幕处理的处理方法，为了能保证换算容易，需先为html设置一个合适的font-size，计算：100 / 750 = fontSize / Width, fontSize = Width / 750 * 100 = W / 7.5;

  使用方法：

•   1、JS方法

     var html = document.querySelector(‘html‘);

     var rem = html.offsetWidth / 7.5;

     html.style.fontSize = rem + "px";

•   2、CSS方法

  在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。

  html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

  body { font-size: 1.4rem; /*1.4 × 10px = 14px */}

  h1 {font-size: 2.4rem; /*2.4 × 10px = 24px*/}

暂时总结的适配方法就是这四点了，ok，end了~~~