h5兼容性问题

最近在解决低版本ios和安卓手机兼容的问题，分享给你们，但愿以后能不掉坑，及时解决问题：

一、h5 监听软键盘弹起、收起

（1）、在ios中软键盘弹起时，仅会引发body的scrollTop值改变，能够经过输入框的获取焦点状况来作判断。所以监听的是输入框的获得焦点和失去焦点事件。

（2)、而在android中存在主动收起键盘后，输入框并无失焦；

android在软键盘弹起或收起时，会改变window的高度，所以监听window的onresize事件；

以react为例子：

componentDidMount(){
   //初始化的高度
    this.setState({    
      windowHeight:document.documentElement.clientHeight ||document.body.clientHeight
    });
    window.addEventListener('resize', this.handleResize);
}

handleResize() {        var winHeight = this.state.windowHeight;   
    var curWinHeight = document.documentElement.clientHeight ||document.body.clientHeight;
    if(curWinHeight-0<winHeight-0){       
        //当软键盘弹起，在此处操做 
     }else{       
         //当软键盘收起，在此处操做 
    }
},
componentWillUnmount() {    
    window.removeEventListener('resize', this.handleResize)
}复制代码

二、ios系统弹起软键盘时，固定定位失效，这是全部ios系统的一个bug，出现此问题时就利用上面监听输入框获取焦点和失去焦点的方法改变样式

三、弹框的宽度最好是偶数，使用rem，不能使用百分比，由于百分比在不一样的手机上可能会计算出带有小数点的像素，这会致使弹框里的字出现锯齿；其次在动画重叠的状况下也可能出现锯齿行为，在body里加样式-webkit-font-smoothing: antialiased; 就能够实现抗锯齿。

四、小米手机部分系统不支持font-weight:600设置的粗体字，改为font-weight:bold 便可

五、部分低版本手机不支持es6的语法，若是用es6语法在低版本的手机上可能会出现空白页

解决方法：es6降级处理

六、解决手机滚动卡顿问题：带滚动条的dom上加-webkit-overflow-scrolling: touch;

七、解决移动端、苹果端、安卓端点击视频自动全屏问题的方法是playsinline

<video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>

八、iphoneX样式适配

（1）、若是想全屏覆盖，html里面请使用

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

（2）、样式适配

iphoneX、iphoneXs（设备屏幕可见宽度为375px， 可见高度为812px，设备像素比为3）

iphone Xs Max（设备屏幕可见宽度为414px， 可见高度为896px，设备像素比为3）

iphone XR（设备屏幕可见宽度为414px， 可见高度为896px，设备像素比为2）

（以iphoneX为例）举例以下：

@media only screen and (device-width: 375px) and (device-height: 812px) 
and (-webkit-device-pixel-ratio: 3) {   
    .page-bottom{        
        padding-bottom:在原来的基础上+34px      
    }
}
//横屏@media all and (orientation : landscape) {}
//竖屏@media all and (orientation : portrait){ }复制代码

(3)、js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就能够这样作

function isIPhoneX(fn){    
    var u = navigator.userAgent;    
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
    if (isIOS) {       
        if (window.screen.height == 812 && window.screen.width == 375 &&          
            window.devicePixelRatio === 3){ 
              //是iphoneX 
        }else{       
            //不是iphoneX 
        }  
    }
} 复制代码