h5兼容性问题

最近在解决低版本ios和安卓手机兼容的问题，分享给大家，希望之后能不掉坑，及时解决问题：

1、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)
}

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

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

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

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

解决方法：es6降级处理

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

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

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

8、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    
        }  
    }
}