移動端那些事兒（一）移動端開發注意事項
對於手機網站建設，總結了如下幾點注意：
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:50px50px;
background-size:50px50px;display:inline-block; width:100%; height:50px;或者指定 background-size:contain;都可以，大家試試！
2、圖片載入
若您遇到圖片載入很慢的問題，對這種情況，手機開發一般用canvas方法載入：
下面舉例說明一個canvas的例子：
<li><canvas s動態載入圖片和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 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來關閉使用者對頁面檢視縮放的行為。
<metaname="viewport"content="user-scalable=0"/>但是為了更好的相容，我們會使用完整的viewport設定。
<metaname="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應用是否以全屏模式執行。
語法：
<metaname="apple-mobile-web-app-capable"content="yes">說明：
如果content設定為yes，Web應用會以全屏模式執行，反之，則不會。content的預設值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。
相容性：
iOS 2.1 +
6、format-detection
format-detection 啟動或禁用自動識別頁面中的電話號碼。
語法：
<metaname="format-detection"content="telephone=no">說明：
預設情況下，裝置會自動識別任何可能是電話號碼的字串。設定telephone=no可以禁用這項功能。
相容性
iOS 1.0 +
7、html5呼叫安卓或者ios的撥號功能
html5提供了自動呼叫撥號的標籤，只要在a標籤的href中新增tel:就可以了。
如下：
<ahref="tel:4008106999,1034">400-810-6999 轉 1034</a>撥打手機直接如下
<ahref="tel:15677776767">點選撥打15677776767</a>8、html5GPS定位功能
9、上下拉動滾動條時卡頓、慢
body {-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;}Android3+和iOS5+支援CSS3的新屬性為overflow-scrolling
10、禁止複製、選中文字
Element{-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;
user-select: none;}解決移動裝置可選中頁面文字(視產品需要而定)
11、禁止連結的callout資訊
element {-webkit-touch-callout: none;}當在iOS上一直按住一個目標元素時，Safari會展示一個關於這個連結的callout資訊。webkit-touch-callout屬性允許禁用掉這一行為。 此屬性目前只針對ios
12、iphone及ipad下輸入框預設內陰影
Element{-webkit-appearance: none;}13、ios和android下觸控元素時出現半透明灰色遮罩
Element{-webkit-tap-highlight-color:rgba(255,255,255,0)}設定alpha值為0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
14、active相容處理 即 偽類 :active 失效
方法一：body新增ontouchstart
<bodyontouchstart="">方法二：js給 document 繫結 touchstart 或 touchend 事件
<style>
a {
color:#000;}
a:active {
color:#fff;}</style><aherf=foo>bar</a><script>
document.addEventListener('touchstart',function(){},false);</script>15、動畫定義3D啟用硬體加速
Element{-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);}注意：3D變形會消耗更多的記憶體與功耗
16、Retina屏的1px邊框
Element{
border-width: thin;}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;21、頂部狀態列背景色
<metaname="apple-mobile-web-app-status-bar-style"content="black"/>說明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta標籤不會起任何作用。
如果content設定為default，則狀態列正常顯示。如果設定為blank，則狀態列會有一個黑色的背景。如果設定為blank-translucent，則狀態列顯示為黑色半透明。如果設定為default或blank，則頁面顯示在狀態列的下方，即狀態列佔據上方部分，頁面佔據下方部分，二者沒有遮擋對方或被遮擋。如果設定為blank-translucent，則頁面會充滿螢幕，其中頁面頂部會被狀態列遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina螢幕為40px）。預設值是default。
相容性 iOS 2.1 +
22、設定快取
<metahttp-equiv="Cache-Control"content="no-cache"/>手機頁面通常在第一次載入後會進行快取，然後每次重新整理會使用快取而不是去重新向伺服器傳送請求。如果不希望使用快取可以設定no-cache。
23、桌面圖示
<linkrel="apple-touch-icon"href="touch-icon-iphone.png"/><linkrel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/><linkrel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/><linkrel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>iOS下針對不同裝置定義不同的桌面圖示。如果不定義則以當前螢幕截圖作為圖示。
上面的寫法可能大家會覺得會有預設光澤，下面這種設定方法可以去掉光澤效果，還原設計圖的效果！
<linkrel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/>圖片尺寸可以設定為5757（px）或者Retina可以定為114114（px），ipad尺寸為72*72（px)
24、啟動畫面
<linkrel="apple-touch-startup-image"href="start.png"/>iOS下頁面啟動載入時顯示的畫面圖片，避免載入時的白屏。
可以通過madia來指定不同的大小：
<!--iPhone--><linkhref="apple-touch-startup-image-320x460.png"media="(device-width: 320px)"rel="apple-touch-startup-image"/><!-- iPhone Retina --><linkhref="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/><!-- iPhone 5 --><linkrel="apple-touch-startup-image"media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"href="apple-touch-startup-image-640x1096.png"><!-- iPad portrait --><linkhref="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)"rel="apple-touch-startup-image"/><!-- iPad landscape --><linkhref="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)"rel="apple-touch-startup-image"/><!-- iPad Retina portrait --><linkhref="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/><!-- iPad Retina landscape --><linkhref="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>25、瀏覽器私有及其它meta
以下屬性在專案中沒有應用過，可以寫一個demo測試以下！
QQ瀏覽器私有
全屏模式
<metaname="x5-fullscreen"content="true">強制豎屏
<metaname="x5-orientation"content="portrait">強制橫屏
<metaname="x5-orientation"content="landscape">應用模式
<metaname="x5-page-mode"content="app">UC瀏覽器私有
全屏模式
<metaname="full-screen"content="yes">強制豎屏
<metaname="screen-orientation"content="portrait">強制橫屏