轉(zhuǎn)自：https://www.cnblogs.com/LiuJL/p/7744473.html
1拯田、安卓瀏覽器看背景圖片震捣，有些設備會模糊岛蚤。
用同等比例的圖片在PC機上很清楚，但是手機上很模糊到涂，原因是什么呢脊框？
經(jīng)過研究，是devicePixelRatio作怪践啄，因為手機分辨率太小浇雹，如果按照分辨率來顯示網(wǎng)頁，這樣字會非常小屿讽，所以蘋果當初就把iPhone 4的960640分辨率昭灵，在網(wǎng)頁里只顯示了480320，這樣devicePixelRatio＝2》ヌ福現(xiàn)在android比較亂烂完，有1.5的，有2的也有3的诵棵。
想讓圖片在手機里顯示更為清晰抠蚣，必須使用2x的背景圖來代替img標簽（一般情況都是用2倍）。例如一個div的寬高是100100履澳，背景圖必須得200200嘶窄，然后background-size:contain;怀跛，這樣顯示出來的圖片就比較清晰了。
代碼如下：
background:url(../images/icon/all.png)?no-repeat center center;
-webkit-background-size:50px?50px;
background-size:?50px?50px;display:inline-block;?width:100%;?height:50px;
或者指定 background-size:contain;都可以柄冲，大家試試吻谋！
2、圖片加載
若您遇到圖片加載很慢的問題羊初，對這種情況滨溉，手機開發(fā)一般用canvas方法加載：
具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html
下面舉例說明一個canvas的例子：
<li><canvas></canvas></li>
js動態(tài)加載圖片和li 總共舉例17張圖片什湘！
var?total=17;
var?zWin=$(window);
var?render=function(){
?var?padding=2;
?var?winWidth=zWin.width();
?var?picWidth=Math.floor((winWidth-padding*3)/4);
?var?tmpl?='';
?for?(var?i=1;i<=totla;i++){
?var?p=padding;
?var?imgSrc='img/'+i+'.jpg';
?if(i%4==1){
? p=0;
?}
?tmpl?+='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
?var?imageObj?=?new?Image();
?imageObj.index?=?i;
?imageObj.onload?=?function(){
? ?var?cvs?=$('#cvs_'+this.index)[0].getContext('2d');
? ?cvs.width?=?this.width;
? ?cvs.height=this.height;
? ?cvs.drawImage(this,0,0);
?}
?imageObj.src=imgSrc;
?}
}
render();
3长赞、假如手機網(wǎng)站不用兼容IE瀏覽器，一般我們會使用zeptojs闽撤。
zeptojs內(nèi)置Touch events方法得哆，具體可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API，已經(jīng)支持IE10以上瀏覽器哟旗，對zeptojs可以選擇使用贩据！
4、防止手機中網(wǎng)頁放大和縮小闸餐。
這點是最基本的饱亮，最為手機網(wǎng)站開發(fā)者來說應該都知道的，就是設置meta中的viewport
還有就是舍沙，有些手機網(wǎng)站我們看到如下聲明：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設置了DTD的方式是XHTML的寫法近上，假如我們頁面運用的是html5，可以不用設置DTD,直接聲明<!DOCTYPE html>拂铡。
使用viewport使頁面禁止縮放壹无。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為
<meta?name="viewport"?content="user-scalable=0"?/>
但是為了更好的兼容，我們會使用完整的viewport設置感帅。
<meta?name="viewport"?content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"?/>
當然斗锭，user-scalable=0,有的人也寫成user-scalable=no，都可以的失球。
5岖是、apple-mobile-web-app-capable
apple-mobile-web-app-capable是設置Web應用是否以全屏模式運行。
語法：<meta?name="apple-mobile-web-app-capable"?content="yes">
說明：
如果content設置為yes实苞，Web應用會以全屏模式運行豺撑，反之，則不會硬梁。content的默認值是no前硫，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示荧止。
6屹电、format-detection
format-detection 啟動或禁用自動識別頁面中的電話號碼阶剑。
語法：<meta?name="format-detection"?content="telephone=no">
說明：
默認情況下，設備會自動識別任何可能是電話號碼的字符串危号。設置telephone=no可以禁用這項功能牧愁。
7、html5調(diào)用安卓或者ios的撥號功能
html5提供了自動調(diào)用撥號的標簽外莲，只要在a標簽的href中添加tel:就可以了猪半。
如下：<a?href="tel:10010">10010</a>
8、html5GPS定位功能?具體請看：http://www.w3school.com.cn/html5/html_5_geolocation.asp
9偷线、上下拉動滾動條時卡頓磨确、慢
body {
?-webkit-overflow-scrolling: touch;
?overflow-scrolling: touch;
}
10、禁止復制声邦、選中文本
Element?{
?-webkit-user-select:?none;
?-moz-user-select:?none;
?-khtml-user-select:?none;
? user-select:?none;
}
解決移動設備可選中頁面文本(視產(chǎn)品需要而定)
11乏奥、長時間按住頁面出現(xiàn)閃退
element?{
?-webkit-touch-callout:?none;
}
12、iphone及ipad下輸入框默認內(nèi)陰影
Element{
?-webkit-appearance:?none;
}
13亥曹、ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩
Element?{
?-webkit-tap-highlight-color:rgba(255,255,255,0)
}
https://blog.csdn.net/weixin_30235225/article/details/96247334?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-5&spm=1001.2101.3001.4242
