<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum- scale=1.0, maximum-scale=1.0,user-scalable=no"/>
</head>
DOCTYPE聲明：采用HTML5的聲明格式，不需要聲明引用DTD
telephone=no 禁止把頁面中的數字轉化為撥号連結。
viewport 設定頁面viewport寬度=裝置寬度，縮放值為1，最大最小縮放值均為1（多重設定是為了相容各種裝置）。
viewport标簽共有以下值：
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值， 如 device-width 為裝置的寬度（機關為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例，值的範圍為0.25至10.0之間
minimum-scale：允許使用者縮放到的最小比例，值的範圍為0.25至10.0之間
user-scalable：使用者是否可以手動縮放
2.适配規則
移動端網頁适配有多種方案：定寬布局，響應式布局，寬度自适應布局，彈性布局等，我們的适配代碼是為了實作彈性布局：頁面整體随手機螢幕寬度變化等比縮放。
window.onresize = r;
function r(resizeNum){
//核心适配代碼
var winW = window.innerWidth;
document.getElementsByTagName("html")[].style.fontSize=winW*+"px";
//核心适配代碼
if(winW>window.screen.width&&resizeNum<=){
setTimeout(function(){
r(++resizeNum)
}, );
}
else{
document.getElementsByTagName("body")[].style.opacity = ;
}
}
setTimeout(function(){r()}, )
在頁面中或者js檔案中放入這段适配代碼即可在頁面中按照以下所給比例使用rem。
rem：HTML5新的計量機關，相對于根元素的font-size來設定大小，一般浏覽器預設font-size=16px，即1rem=16px，為了友善計算，并且保證在電腦的chrome中正确顯示（chrome中字型最小顯示為12px），我們使用js進行計算，使頁面winW=640時，html的font-size=100px，頁面為其它寬度時font-size按此規則等比縮放。是以我們的比例為：以640寬的UI圖為基準，1rem=100px。
需要設定頁面body的css：opacity：0，因為部分機型中viewport縮放是有時間差的，是以我們檢測當其viewport縮放完成後再設定opacity：1。
3.頁面建構
以寬度為640的UI圖為基準：頁面中所有需要用px機關的地方都按100：1換算為rem，當然也可以使用百分比（必要時），百分比沒有換算關系，和web端用法一緻。
html5标簽和css3屬性：盡量使用語義化标簽，優化文檔結構，減少标簽嵌套，輔助性樣式（如橫線、圖示等）盡量使用css3僞類建構，常見的css3屬性在移動端支援度都很高，不存在相容性問題。如果要使用比較特殊的，或者自己不太确定的，可以在該網站中檢測其相容性：http://caniuse.com/
4.js架構
如果頁面簡單，直接使用原生js即可，推薦使用HTML5的新的js api：querySelector，querySelectorAll等
複雜頁面：zepto.js，與jquery用法高度相似。