移動端常常出現的兼容問題

時間 2019-11-26

標籤移動常常出現兼容問題欄目無線简体版

原文原文鏈接

移動端常常出現的兼容問題

1.安卓瀏覽器看背景圖片，有些設備會模糊

由於手機分辨率過小，若是按照分辨率來顯示網頁，字會很是小，安卓手機devicePixoRadio比較亂，有1.5的，有2的也有3的。想讓圖片在手機裏顯示更爲清晰，必須使用2x的背景圖來代替img標籤（通常狀況下都是2倍的），或者指定background-size:contain;均可以javascript

2.防止手機中頁面放大和縮小

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

3.上下拉動滾動條時卡頓、慢

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

Android3+和iOSi5+支持CSS3的新屬性爲overflow-scrollingcss

4.長時間按住頁面出現閃退

element{
-webkit-touch-callout:none;
}

5.iphone及ipad下輸入框默認內陰影

element{
    -webkit-appearance:none;;
}

6.ios和android下觸摸元素時出現半透明灰色遮罩

element{
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}

設置alpha值爲0就能夠去除本透明灰色遮罩，備註：transparent的屬性值在android下無效。html

7.active兼容處理即僞類：active失效

方法一：body添加ontouchstartjava

<body ontouchstart=''>

方法二：js給document綁定touchstart或touchend事件android

<style>
a{
    color:#000;
}
a:active{
    color:#fff;
}
</style>
<a href=foo>bar</a>
<script>
document.addEventListentener('touchstart',function(){},false);
)
</script>

8.1px邊框

在移動端中，若是給元素設置一個像素的邊框的話，那麼在手機上看起來是會比一個像素粗的。ios

解決方法：使用僞類元素模擬邊框，使用transform縮放css3

.a::after{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #333;
        position: absolute;
        left: 0;bottom: 0;
        transform: scaleY(0.5)
    }

9.webkit mask兼容處理

某些低端手機不支持css3mask，能夠選擇性的進降級處理
好比能夠使用js判斷來引用不一樣class：web

if('WebkitMask' in documnet.documentElement.style){
    alert('支持 mask')
}else{
    alert('不支持 mask')
}

10.旋轉屏幕是，字體大小調整的問題

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
    -webkit-text-size-adjust:100%;
}

11.transiton閃屏

//設置內聯的元素在3D空間如何呈現：保留3D
-webkit-transform-style:preserve-3D;
//設置進行轉換的元素的背面在面對用戶時是否課件：隱藏
-webkit-backface-visibility:hidden;

12.圓角bug

某些Android手機圓角失效 background-clip:padding-box;瀏覽器

13.click的300ms延遲問題

在移動端中，click事件是生效的，可是，點擊以後會有300ms的延遲響應app

緣由：safari是最先作出這個機制的，由於在移動端裏，瀏覽器須要等待一段時間來判斷這次用戶操做是單擊仍是雙擊，因此就有click300ms的延遲機制，Android也很快就有了

不用click，用自定義事件tap
tap是須要自定義的：若是用戶執行了touchstart在很短的時間又觸發了touchend,且兩次的距離很小，並且不能
引入fastclick庫來解決

14.響應式圖片

在移動端中，圖片的處理應該是很謹慎的，假設有一張圖片自己的尺寸是X寬，設置和包裹它的div同樣寬，若是是div寬度小於圖片寬度沒有問題，可是若是div寬度大於圖片的寬度，圖片被拉伸失真

解決方法：讓圖片最大隻能是本身的寬度

img{
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

15.點透bug的產生

例如：

<div id="haorooms">點頭事件測試</div>
<a href="www.jb51.net">www.jb51.net</a>

div是絕對定位的蒙層，而且z-index高於a。而a標籤是頁面中的一個連接，咱們給div綁定tap事件：

$('#haorooms').on('tap',function(){
    $('#haorooms').hide();
})

咱們點擊蒙層時div正常消失，可是當咱們在a標籤上點擊蒙層時，發現a連接被觸發，這就是所謂的點透事件。

緣由：
touchstart早於touchend早於click。即click的觸發是由延遲的，這個時間大概在300ms左右，也就是說咱們tap觸發以後蒙層隱藏。此時click尚未觸發，300ms以後因爲蒙層隱藏，咱們的click觸發到了下面的a連接。

解決：

1.儘可能都使用touch事件來替換click事件。例如用touchend事件（推薦） 2.用fastclick 3.用preventDefault阻止a標籤的click 4.延遲必定的事件（300ms+）來處理事件（不推薦）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

移動端常常出現的兼容問題