移动端适配

移动端适配

1.适配宽高等问题
REM方案：改变页面根部的font-size

1.通过媒体查询css来改变，缺点，不够精确，只能单纯解决长度问题，不够适配
```
html{font-size: 32px}
@media(min-device-width: 375px) {
    html{font-size: 64px}
}
@media(min-device-width: 414px) {
    html(font-size: 75px)
}
```

js方案：通过缩放viewport，达到高清效果，设置data-dpa属性，方便csshack

    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    scale = 1 / dpr;
    dpr = win.devicePixelRatio || 1;
    rem = docEl.clientWidth * dpr / 10;
    // 设置viewport，进行缩放，达到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',
                     initial-scale=' + scale + ',maximum-scale=' + scale + ',
                     minimum-scale=' + scale + ',user-scalable=no');
    // 设置data-dpr属性，留作的css hack之用
    docEl.setAttribute('data-dpr', dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
    // 给js调用的，某一dpr下rem和px之间的转换函数
    window.rem2px = function(v) {
         v = parseFloat(v);
            return v * rem;
    };
    window.px2rem: function(v) {
            v = parseFloat(v);
            return v / rem;
    };
    window.dpr = dpr;
    window.rem = rem;

2.解决字体适配问题：通过上面的dpr属性来进行cssHack

字体要求：任何手机屏幕上字体大小都要统一，所以我们针对不同的分辨率(dpr不同)，会做如下处理：
font-size: 16px;
[data-dpr="2"] input {
  font-size: 32px;
}

为了方便，我们也会用less写一个mixin：
less
font-dpr(@font-size){
    font-size: @font-size;
    
    [data-dpr="2"] & {
        font-size: @font-size * 2;
    }

    [data-dpr="2.5"] & {
        font-size: @font-size * 2.5;
    }
    
    [data-dpr="2.75"] & {
        font-size: @font-size * 2.75;
    }
    [data-dpr="3"] & {
        font-size: @font-size * 3;
    }
    
    [data-dpr="4"] & {
        font-size: @font-size * 4;
    }
}

.font-dpr(font-size, 32);

当然也有开源的插件来帮我们做这件事

lib-flexible 可伸缩布局方案:
它的原理跟以上的原理一样，也是动态创建viewport

字体问题:用[data-dpr]属性来区分不同dpr下的文本字号大小
div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的

sass
@mixin font-dpr($font-size){
    font-size: $font-size;
    
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

@include font-dpr(16px);

Css兼容性问题

* 快速点击问题：因为浏览器需要300毫秒来判断是否是快速点击，所以页面js捕获click事件的回调函数处理，需要300ms后才生效：
使用fastclick.js， 如果使用zepto，使用touch和tap事件

* 一些情况下对非可点击元素如(label,span)监听click事件ios下不会触发：
css增加cursor:pointer就搞定了。

* 当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
        
   });

* 消除 transition 闪屏：
-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

*在ios和andriod中,audio元素和video元素在无法自动播放
$('html').on('touchstart',function(){
    audio.play()
})

*CSS动画页面闪白,动画卡顿：
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

*fixed定位缺陷：
    •   ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
    •   android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
    •   ios4下不支持position:fixed
    •   解决方案：1. 可用iScroll插件解决这个问题

*阻止旋转屏幕时自动调整字体大小：
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

*calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}