安卓瀏覽器看背景圖片，有些設備會模糊
因爲手機分辨率太小，如果按照分辨率來顯示網頁，字會非常小，安卓手機devicePixoRadio比較亂，有1.5的，有2的也有3的。想讓圖片在手機裏顯示更爲清晰，必須使用2x的背景圖來代替img標籤（一般情況下都是2倍的），或者指定background-size:contain;都可以
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-scrolling
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下無效。
7.active兼容處理 即 僞類：active失效
方法一：body添加ontouchstart
<body ontouchstart=''>方法二：js給document綁定touchstart或touchend事件
<style>a{ color:#000;}a:active{ color:#fff;}</style><a href=foo>bar</a><script>document.addEventListentener('touchstart',function(){},false);)</script>8.1px邊框
在移動端中，如果給元素設置一個像素的邊框的話，那麼在手機上看起來是會比一個像素粗的。
解決方法：使用僞類元素模擬邊框，使用transform縮放
.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：
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的延遲響應
原因：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+）來處理事件（不推薦）
作者：空一座舊城，守一箇舊人
聲明 | 文章著作權歸作者所有，如有侵權，請聯繫小編刪除。