html5技術教程移動端經常出現的相容問題

標籤：none   不用   post   lock   縮小   abs   ref   一段   body   

移動端 經常出現的相容問題 1.安卓瀏覽器看背景圖片，有些裝置會模糊

因為手機解析度太小，如果按照解析度來顯示網頁，字會非常小，安卓手機devicePixoRadio比較亂，有1.5的，有2的也有3的。想讓圖片在手機裡顯示更為清晰，必須使用2x的背景圖來代替img標籤（一般情況下都是2倍的），或者指定background-size:contain;都可以

2.防止手機中頁面放大和縮小 3.上下拉動捲軸時卡頓、慢
bodytouch; overflowtouch; }

Android3+和iOSi5+支援CSS3的新屬性為overflow-scrolling

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

5.iphone及ipad下輸入框預設內陰影
elementnone;; }

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

設定alpha值為0就可以去除本透明灰色遮罩，備忘：transparent的屬性值在android下無效。

7.active相容處理 即 偽類：active失效
方法一：body添加ontouchstart

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

<style> a#a#fffscript(){},false); ) </script>

8.1px邊框
在移動端中，如果給元素設定一個像素的邊框的話，那麼在手機上看起來是會比一個像素粗的。

解決方案：使用偽類元素類比邊框，使用transform縮放

.block1px#absolute(0.5) }

9.webkit mask相容處理
某些低端手機不支援css3mask，可以選擇性的進降級處理
比如可以使用js判斷來引用不同class：

.documentElement.style){ alert(‘支援 mask‘) (‘不支援 mask‘) }

10.旋轉螢幕是，字型大小調整的問題
html

11.transiton閃屏
webkit-backface-visibility:hidden;

12.圓角bug
某些Android手機圓角失效 background-clip:padding-box;

13.click的300ms延遲問題
在移動端中，click事件是生效的，但是，點擊之後會有300ms的延遲響應

原因：safari是最早做出這個機制的，因為在移動端裡，瀏覽器需要等待一段時間來判斷此次使用者操作是單擊還是雙擊，所以就有click300ms的延遲機制，Android也很快就有了

不用click，用自訂事件tap

tap是需要自訂的：如果使用者執行了touchstart在很短的時間又觸發了touchend,且兩次的距離很小，而且不能
引入fastclick庫來解決

14.響應式圖片
在移動端中，圖片的處理應該是很謹慎的，假設有一張圖片本身的尺寸是X寬，設定和包裹它的div一樣寬，如果是div寬度小於圖片寬度沒有問題，但是如果div寬度大於圖片的寬度，圖片被展開失真

本文轉自：h5牛牛平台源碼搭建 www.yasewl.com

解決方案：讓圖片最大隻能是自己的寬度
img{ maxblockauto; }

15.點透bug的產生
例如：

點頭事件測試

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

())

我們點擊蒙層時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+）來處理事件（不推薦）

html5技術教程移動端經常出現的相容問題