混合開發中,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);
    }
}
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM