移動端開發準備
1、meta標籤的設定
h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面
忽略將頁面中的數字識別為**號碼
忽略android平台中對郵箱位址的識別
2、重點設定
width = device-width：寬度等於當前裝置的寬度
initial-scale： 初始的縮放比例（預設設定為1.0）
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
3、解析度，ppi,dpi,dpr,物理畫素，邏輯畫素區別
螢幕尺寸：指的是螢幕對角線的長度
解析度：是指寬度上和高度上最多能顯示的物理畫素點個數
點距：畫素與畫素之間的距離，點距和螢幕尺寸決定了解析度大小
ppi:螢幕畫素密度，即每英吋(1英吋=2.54厘公尺)聚集的畫素點個數，這裡的一英吋還是對角線長度
dpi:每英吋畫素點，印刷行業術語。對於電腦螢幕而言和ppi是乙個意思
裝置畫素(又稱為物理畫素): 指裝置能控制顯示的最小物理單位，意指顯示器上乙個個的點。從螢幕在工廠生產出的那天起，它上面裝置畫素點就固定不變了，和螢幕尺寸大小有關，單位 pt。
裝置獨立畫素(也叫密度無關畫素或邏輯畫素)：可以認為是計算機座標系統中得乙個點，這個點代表乙個可以由程式使用的虛擬畫素(比如: css畫素)，這個點是沒有固定大小的，越小越清晰，然後由相關系統轉換為物理畫素。
css畫素(也叫虛擬畫素)：指的是 css 樣式**中使用的邏輯畫素，在 css 規範中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px 是乙個相對單位，相對的是裝置畫素(device pixel9、dpr(裝置畫素比)：裝置畫素比 = 裝置畫素（物理畫素） / 裝置獨立畫素（邏輯畫素）。(在retina屏的iphone上，dpr為2，1個css畫素相當於2個物理畫素)
以iphone6為例：
裝置寬高為375×667，可以理解為裝置獨立畫素(或css畫素)。
dpr為2，根據上面的計算公式，其物理畫素就應該×2，為750×1334。
在普通螢幕下，1個css畫素 對應 1個物理畫素(1:1)。
在retina 螢幕下，1個css畫素對應 4個物理畫素(1:4)
當設計圖為640px或750px時選取dpr=2；750px以上選取dpr為3
4、常見單位
4.1 px其實就是畫素的意思，全稱pixel，也就是影象的基本取樣單位。對於不同的裝置，它的影象基本單位是不同的，比如顯示器和印表機。而我們通常所說的顯示器解析度是指桌面設定的解析度，不是顯示器的物理解析度，但是現在我們的桌面解析度和物理解析度幾乎是一致的，因為這樣顯示效果最佳。所以總的來說px就是對應我們顯示器的解析度。這樣就會有個問題就是如果使用px的話我們就要根據不同電腦的解析度來做自適應，有點麻煩。
4.2 em是相對長度單位。相對於當前物件內本文的字型尺寸（如果沒有設定本文尺寸，那就是相對於瀏覽器預設的字型尺寸，也就是16px），這樣計算的話。如果沒有設定字型尺寸就是1em = 16px。如果使用em的話，有個好的建議，就是將body的font-size設定成62.5%，也就是16px * 62.5% = 10px。這樣的話1em = 10px，方便我們計算。
4.3 rem和em一樣也是相對長度單位，但是不一樣的是rem始終都是相對html根元素。這樣有個很大的有點就是使用rem後不會受到物件內文字字型尺寸的影響，而且只需要改變根元素就能改變所有的字型大小。相容性也是不錯的，ie8以上版本和其他瀏覽器都已經支援，是個做響應式頁面的好選擇
4.4 vw和vh是視口（viewport units）單位，何謂視口，就是根據你瀏覽器視窗的大小的單位，不受顯示器解析度的影響，是不是很神奇，這就代表了，我們不需要顧慮到現在那麼多不同電腦有關解析度的自適應問題。
vw是可視視窗的寬度單位，和百分比有點一樣，1vw = 可視視窗的寬度的百分之一。比如視窗寬度大小是1800px，那麼1vw = 18px。和百分比不一樣的是，vw始終相對於可視視窗的寬度，而百分比和其父元素的寬度有關。
vh就是可視視窗的高度了。這邊順便提一下vmin和vmax，vmin是指選擇vw和vh中最小的那個，而vmax是選擇最大的那個
單位轉化問題：
html設定font-size的值：100px；1rem==100px；那麼100px==？vw
當設計圖為640px時，dpr選為2，所以640/2=320px；所以視口的寬為320px ；所以100vw=320px；所以 1vw=3.2px；所以100px=31.25vw
當設計圖為750px時，考慮dpr==2，以此類推得到100px=26.67vw
總結：當設計圖為640px，html的font-size值為31.25vw，當設計圖為750px，html的font-size值為26.67vw。
HTML5 移動端開發入門
下面舉個例子 lang en charset utf 8 name viewport content width device width documenttitle ul lili before li nth child 1 before li nth child 2 before li nth ...
HTML5移動端開發之viewport
在移動裝置上進行網頁的重構或開發，首先得搞明白的就是移動裝置上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標籤的使用，才能更好地讓我們的頁面適配或響應各種不同解析度的移動裝置。移動前端中常說的viewport 視口 就是使用者網頁中的可視區域。v...
html5移動開發
canvas 3d 3d的繪圖功能支援 svg 向量圖支援 設計師要知道，的移動 旋轉 縮放?那都太基礎了，自己畫都是小case，至於怎麼用，好好想想吧 5.專為移動平台定製的表單元素 瀏覽器中出現的html5表單元素與對應的鍵盤 型別用途鍵盤 可以綜合使用gps wifi 手機等方式讓定位更為精準...