移动端H5页面常见问题

最近一直在写移动端H5页面，遇见了很多问题，做个小小的总结~

痛心疾首的fixed定位问题

1. ios设备微信浏览器或者Safari中fixed定位部分跟随滑动跳动

灵魂画手#_#

老铁们一定切过这样的图，什么叫跳动，就是滑动时fixed定位的部分会跟着滑动，滑动结束后又弹回定位的位置，偶尔还会出现跟顶部底部粘住的现象，哇塞，这酷炫的效果差点没被产品怼出翔......

根据我（长期跟测试产品互怼）的经验，移动端尽量不要使用fixed定位，特别是傲娇的ios，总会给你意外的惊喜。所以这个效果要怎么实现呢，我目前觉得最好的办法就是：
全部使用position：absolute
就说上面这张图（是丑了点，示意示意），上代码：

//首先是html

    
header
    
main
    
footer

//css
.header{
    width:100%;
    height:100px;
    position:absolute;
    left:0;
    top:0;      
}
.footer{
    width:100%;
    height:100px;
    position:absolute;
    left:0;
    bottom:0;   
    overflow:auto;     
}
.main{
    width:100%;
    position:absolute;
    left:0;
    right:0;
    top:100px;
    bottom:100px; //最后两句是关键       
}

完美#_#

2.滑动卡顿问题

刚改完，测试又过来了，你这个滑动有问题，不可能，老夫写的代码怎么可能有......额，好像是哦，怎么滑的时候一卡一卡的
怎么才能像原生一样丝滑呢？？？这时候需要一个css属性：-webkit-overflow-scrolling

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

选择-webkit-overflow-scrolling: touch;就是这么丝滑~

3.弹出蒙层滑动下面页面也会跟着滑动问题

老铁们肯定也会遇到这种交互场景，弹出提示框等各种遮罩层，在遮罩层上滑动的时候下面的内容也会跟着滑动，这肯定是不好的。这个的解决方法很多，我说一种思路。
通过js控制body,html的样式。弹出遮罩层的时候将body，html的超出部分隐藏（overflow:hidden），关闭遮罩层的时候再改回over-flow：auto；

4.键盘弹出影响布局问题

肯定有很多道友，点击输入框弹出输入框要么顶了个按钮上来，要么吧底部顶上来了，所以你大兄弟头铁啊，不要用不要用不要用 fixed，不给自己挖坑！！！
你管我，我就这么写!（拿我四十米长的大刀来......）
解决思路有以下几种（具体情况具体处理，不好使不接受批评-_-#）：

• 最好的方当然是尽量不使用定位，布局从上到下定死
• 监听input的聚焦事件，聚焦的时候隐藏掉挤上来的按钮或者底部布局，失去焦点的时候再显示
• 同样可以使用媒体查询检测高度小于一定值时隐藏挤上来的部分

@media (max-height: 400px) { 
  .footer {
    display: none;
  }
}

• 你使用absolute定位也是会被顶上来的，可以利用js给页面一个定高

$(document).ready(function () {
　　$('body').height($('body')[0].clientHeight);
});

猴里希特，这才第一点就写了这么多，先到这里吧，剩下的下一篇继续......