loding...

移动端适配

• rem
  flexible.js也是rem适配的，它是将设备分成10份，1rem等于1/10。分析其中部分代码：

 var devicePixelRatio = win.devicePixelRatio;

        dpr = devicePixelRatio || 1;
        if (isIPhone) {

            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
        
       ......
       .......
        
       metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

win.devicePixelRatio(简称dpr),即设备像素比

上述代码当dpr为3时候，页面缩入1/3,dpr为2时，页面绽放2/1。
然后设置html根元素的fontSize

  function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

1rem设置成了设备真实宽度的1/10，因此html根元素的fontSize也就是设备真实宽度的1/10，假如设计稿子是750px宽，写scss时1rem也就应该等于75px,那边我么的scss文件可以这样写

@function px2rem($px, $base: 75) {
    @return ($px / $base) * 1rem;
}
/*
稿子上量得某按钮宽60px,高20px
*/
.btn{
    width:px2rem(60);
    height:px2rem(20);
}

• vw,vh进行适配
  vw：viewport width(可视窗口宽度)
  vh：viewport height(可视窗口高度)
  1vw等于1%的设备宽度(设计稿宽度)，1vh等于1%的设备高度(设计稿高度),这样看来vw,vh其它是最方便的，但是目前兼容性不是特别好。

/*右下角窗口设计稿宽200px，高220px*/
@function px2vw($px, $base: 200) {
  @return ($px/($base/100)) + vw;
}
@function px2vh($px, $base: 220) {
  @return ($px/($base/100)) + vh;
}
/*头像宽42px,高42px*/
.avantar{
    width:px2vw(42);
    heightx:px2vh(42);
}

---

移动端兼容性的坑

• iOS移动端click事件300ms的延迟相应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
这是由于区分单击事件和双击屏幕缩放的历史原因造成的。
解决方法：
fastclick可以解决在手机上点击事件的300ms延迟

zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定ontouchstart事件，加快事件的响应，解决300ms的延迟问题

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

• h5底部输入框被键盘遮挡问题
  当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

 if($(document).height() < oHeight){  
   $("#footer").css("position","static");
}else{
   $("#footer").css("position","absolute");
}

• 1px问题
  设计师提供的视觉稿一般是750px，当你定义border-width:1px 时，在iphone6手机上却发现：边框变粗了。。

这是因为，1px是相对于750px的（物理像素），而我们定义的1px是相对于375px的（css像素）“实际上应该是border-width:0.5px”。

解决方法：

伪类 + transform 实现

xxx:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    transform: scale(0.5);
    transform-origin: left top;
    border: 1px solid gray;
    border-radius: $radius;
}

---