混合開發中，app內嵌h5頁面時，安卓ios遇到的一些兼容問題及解決方法

1.input[type=checkbox]在ios端樣式顯示異常，黑色背景或邊框，安卓正常

解決：

input[type=checkbox]:checked{
    background-color: transparent;
    border: none;
}

2.option標簽在ios端不支持在onfocus事件中渲染dom，安卓和vue不影響

解決：

正常步驟，可在頁面加載時提前加載數據渲染dom

3.ios的input失焦時，喚醒鍵盤后頁面高度變低，后滑動的頁面無法正常回彈

解決：

1》.看滑動的部分父元素是否有height：100%，去掉或還原成默認高度：

height：auto

2》.在失焦事件中強制還原頁面高度：

$("input,select").blur(function(){
    setTimeout(function() {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    }, 100);
})  　

4.移動端上拉下滑滾動條卡頓，啟動硬件加速

body {
　　-webkit-overflow-scrolling:touch;
　　overflow-scrolling: touch;
}

備注：無效的時候考慮可能客戶端打包時的內核版本過舊，需要客戶端升級

5.移動端點擊事件為了驗證用戶是否在做雙擊事件延遲300ms

方法1.在mate標簽添加user-scalabel=no，禁用用戶縮放網頁

方法2.fastclick.js。原理：在檢測到touchend事件的時候 ，會通過DOM自定義事件立即出發模擬一個click事件，並把瀏覽器在300ms之后真正的click事件阻止掉

6.移動端1px顯示兼容問題：如iphone4機型的retina屏幕的1px邊框顯示粗

原因：設計稿的1px/750px設計稿，小屏幕1px/375px,實際應是0.5px

解決：偽元素+transform實現：為什么用偽元素？ 因為偽元素 ::after 或 ::before 是獨立於當前元素，可以單獨對其縮放而不影響元素本身的縮放 

.border-1px:before{
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #999;
    transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .border-1px:before{
        transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .border-1px:before{
        transform: scaleY(0.33);
    }
}