推薦:https://blog.csdn.net/sinat_38992528/article/details/79098706
css
1.安卓瀏覽器看背景圖片,有些設備會模糊html
由於手機分辨率過小,若是按照分辨率來顯示網頁,字會很是小,安卓手機devicePixoRadio比較亂,有1.5的,有2的也有3的。想讓圖片在手機裏顯示更爲清晰,必須使用2x的背景圖來代替img標籤(通常狀況下都是2倍的),或者指定background-size:contain;均可以android
2.防止手機中頁面放大和縮小ios
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>css3
3.上下拉動滾動條時卡頓、慢web
body{瀏覽器
-webkit-overflow-scrolling:touch;app
overflow-scrolling:touch;iphone
}ide
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>
<>
document.addEventListentener('touchstart',function(){},false);
)
</>
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+)來處理事件(不推薦)