移動端開發常見問題解決方案彙總- Javascript技巧（一）
1、安卓瀏覽器看背景圖片，有些裝置會模糊。
用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？
經過研究，是devicePixelRatio作怪，因為手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640解析度，在網頁裡只顯示了480320，這樣devicePixelRatio＝2。現在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、圖片載入
若您遇到圖片載入很慢的問題，對這種情況，手機開發一般用canvas方法載入：
具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html
下面舉例說明一個canvas的例子：
<li><canvas></canvas></li>js動態載入圖片和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、假如手機網站不用相容IE瀏覽器，一般我們會使用zeptojs。
zeptojs內建Touch events方法，具體可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API，已經支援IE10以上瀏覽器，對zeptojs可以選擇使用！
4、防止手機中網頁放大和縮小。
這點是最基本的，最為手機網站開發者來說應該都知道的，就是設定meta中的viewport
還有就是，有些手機網站我們看到如下宣告：
<!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來確定網頁是否以全屏模式顯示。
6、format-detection
format-detection 啟動或禁用自動識別頁面中的電話號碼。
語法：
<meta name="format-detection" content="telephone=no">說明：
預設情況下，裝置會自動識別任何可能是電話號碼的字串。設定telephone=no可以禁用這項功能。
7、html5呼叫安卓或者ios的撥號功能
html5提供了自動呼叫撥號的標籤，只要在a標籤的href中新增tel:就可以了。
如下：
<a href="tel:10010">10010</a>8、html5GPS定位功能
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;
}解決移動裝置可選中頁面文字(視產品需要而定)
11、長時間按住頁面出現閃退
element {
-webkit-touch-callout: none;
}12、iphone及ipad下輸入框預設內陰影
Element{
-webkit-appearance: none;
}13、ios和android下觸控元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}14、active相容處理 即 偽類 :active 失效
方法一：body新增ontouchstart
<body ontouchstart="">方法二：js給 document 繫結touchstart或touchend事件
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>15、動畫定義3D啟用硬體加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}16、Retina屏的1px邊框
具體請百度谷歌關鍵字，解決方案有很多
17、webkit mask 相容處理
某些低端手機不支援css3 mask，可以選擇性的降級處理。
比如可以使用js判斷來引用不同class：
if( 'WebkitMask' in document.documentElement.style){
alert('支援mask');
} else {
alert('不支援mask');
}18、旋轉螢幕時，字型大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}19、transition閃屏
/設定內嵌的元素在 3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d;
/ 設定進行轉換的元素的背面在面對使用者時是否可見：隱藏 /
-webkit-backface-visibility:hidden;20、圓角bug
某些Android手機圓角失效
background-clip: padding-box;