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 
        }  
    }
} 複製代碼