在移动端遇到过的很西八的问题

1.有时候一些元素，如label,span,div等，"非点击"元素，在ios上无法触发click事件，这时候可以给元素加上：

cursor:pointer;

2.safari浏览器里，position的两个定位都要写，只写一个容易错乱

我是吸顶头部啊~
我是中间内容啊~
我是吸底尾部啊~

.header{
    width:100%;
    height:66px;
    position:fixed;
    top:0;
    left:0;
}
.container{
    width:100%;
    height:auto;
    position:absolute;
    box-sizing:border-box;
    padding-top:66px;
    padding-botton:66px;
    overflow-y:auto;
}
.footer{
    width:100%;
    height:66px;
    postion:fixed;
    left:0;
    bottom:0;
}

3.移动端输入框弹起影响布局。使用 scrollIntoViewIfNeeded

  window.addEventListener('risize',function(){
      if(document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA"){
            window.setTimeout(function(){
                  document.activeElementt.scrollIntoViewIfNeeded();
            },0);
      }
  })

4页面滑动的时候会有卡顿或者失去惯性

-webkit-overflow-scrolling:touch

    不过这个属性要给fixed的元素

真机有效。为了解决有时候fixed是动态添加，结合js。

//弹窗显示的事件
    $('.dialogShow').on('click',function(){
            //弹窗显示
            $('.dialog').show();
            //给该弹窗添加ios safari专用润滑剂
            $('.iosWeb').css('-webkit-overflow-scroll','touch');
    })
    //隐藏弹窗的事件
    $('.doalogHide').on('click',function(){
            //弹窗隐藏
            $('.dialog').hide();
         //去掉ios safari专用润滑剂
            $('.iosWeb').css('-webkit-overflow-scroll','auto');
    })

5.移动端有时候input的placeholder文字会上移

line-height:normal

6.300ms延迟

touch-action: manipulation

6.页面出现弹层时，禁止页面触发滚动

//弹层唤起事件
$("html,body").css({"overflow":"hidden"})
//弹层关闭事件中
$("html,body").css({"overflow":"auto"})

这样可以解决，还有一种办法

//出来
el.style.webkitOverflowScrolling = 'auto';
//出去
el.style.webkitOverflowScrolling = 'touch'