常见移动端兼容问题以及解决方案

IOS上click点击事件会有300ms的延迟响应：

换用zepto的touch模块，tap事件也是为了解决在click的延迟问题
或者引入fastclick.js解决

移动端页面滚动滞涩感

css在body元素上添加-webkit-overflow-scrolling: touch;

软键盘与输入框问题

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

var oHeight = $(document).height(); //浏览器当前的高度
   
$(window).resize(function(){
     
    if($(document).height() < oHeight){
     
        $("元素").css("position","static");
    }else{
     
        $("元素").css("position","absolute");
    }    
});

另一软键盘输入框问题，也可视为fixed定位失败问题，ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
1、虽然 isScroll.js 可以很好的解决 fixed 定位滚动的问题，但是不在万不得已的情况下，我们尽量尝试一下不依赖第三方库的布局方案，以简化实现方式。

解决思路：

既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。配合移动端页面滚动滞涩感的解决思路css在body元素上添加-webkit-overflow-scrolling: touch;
如果考虑到更老一些的 iOS 系统不支持 fixed 元素，完全可以把 fixed 替换成 absolute 。测试后效果是一样的。

谈到了 iOS ，也来简单说一下 Android 下的布局吧。

在 Android2.3+ 中，因为不支持 overflow-scrolling ，因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的，因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。

如果需要考虑 Android2.3 以下系统，因为不支持 fixed 元素，所以依然要需要考虑使用 isScroll.js 来实现内部滚动。

其实在 fixed 和输入框的问题上，基本思路就是： > 由于 fixed 在软键盘唤起后会失效，导致在页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么 fixed 元素即使失效，也不会滚动，也就不会出现 bug 了。

所以可以在这个方面去考虑解决问题。

至此一个不依赖第三方库的 fixed 布局就完成了

// 处理iOS 微信客户端弹窗状态下调起输入法后关闭输入法页面元素错位解决办法
    var ua = window.navigator.userAgent.toLowerCase();
    if (/iphone|ipod|ipad/i.test(navigator.appVersion) && /MicroMessenger/i.test(ua)) {
     
      document.body.addEventListener('focusout', () => {
     
        console.log('focusout')
        window.scrollTo({
      top: 0, left: 0, behavior: 'smooth' })
      });
    }
    //或者：
    scrollto0() {
     
      window.scrollTo(0, 0);
    }

阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
     -webkit-text-size-adjust:none;}

移动端某些情况下input的placeholder会出现文本位置偏上的现象：

PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

修改移动端的点击高亮效果

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

zepto的点透问题

引入fastclick.js，在页面中加入如下js代码

window.addEventListener( "load", function() {
     
     FastClick.attach( document.body );
}, false );