之前一直做的是web端，換工作之后重心變成了移動端，嘗試幾次之后總結了兩種移動端頁面的開發模式，可以自適應各種屏幕大小。希望對大家有所幫助。\(▔＾▔)/
一、使用meta標簽使網頁寬度自適應手機屏幕
1 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在網頁的<head>中增加這句話，可以讓網頁的寬度自動適應手機屏幕的寬度。<meta> 元素可提供有關頁面的元信息。<meta> 標簽位於文檔的頭部，不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。
width=device-width ：表示寬度是設備屏幕的寬度
initial-scale=1：表示初始的縮放比例
minimum-scale=1：表示最小的縮放比例
maximum-scale=1：表示最大的縮放比例
user-scalable=no：表示用戶是否可以調整縮放比例
利用這種方法來使網頁自適應手機屏幕之后，在頁面布局中，css定義寬度的時候最好不要使用具體的值（例如xx px），而是應該使用百分比。
例如：
就拿這個頁面中間的表格來說：
最外層div是90%，居中，給兩邊留了邊距。里面的表格相比於div寬度是100%，表格每行的第一個單元格是表格寬度的30%。
這樣設置之后，不管移動設備有多大，表格都會隨着移動設備的寬度變化而增大/縮小，在每個設備上看到的效果都是一樣的。
需要注意的是：這種方法下定義字體大小的時候，盡量使用 em 或者 rem ，而不要使用 px 。 px 並不會隨着屏幕大小的變化而變化。
二、使用js對網頁進行縮放
這種方法與第一種方法不同的是：在開發過程中，完全不用考慮適配問題，不用使用百分比，甚至字體可以直接使用px。這種方法是利用一段js代碼來對網頁進行等比縮放，可以直接將頁面寬度寫死，然后根據 固定寬度 進行開發。
首先將下面這段js代碼放在要開發的頁面中。
1 function bodyScale() { 2 var devicewidth = document.documentElement.clientWidth; 3 var scale = devicewidth / 640; 4 document.body.style.zoom = scale; 5 } 6 window.onload = window.onresize = function () { 7 bodyScale(); 8 };
我公司的設計師一般給的設計稿是640的，所以我上面的代碼基數是640，在開發過程中也是以640px的標准來開發的。如果設計師給的設計稿是其他尺寸的，這里做出相應的改變即可，沒有很大的影響。
1、最外層div，我直接固定寬度 640px 。
（需要注意的是，body后面的style="zoom:1.53125;"並不是我寫上去的，這是由那段js代碼生成的。可以直接忽略它。）
2、圖上面的表單，也是直接使用固定的寬度
label：
input：
(label) 90px + (input) 470px + (左邊距) 40px + (右邊距) 40px = 640px 剛剛好640px。
這種方式比較簡單，不用動腦，一段js代碼就搞定了。當然適配效果也很好，這里就不貼圖了，demo已上傳服務器。
線上demo （純靜態頁面）
！！！需要注意的是，兩種方法不能混用。
之前開發的時候粗心大意，在使用第二種方法中的js之后，head標簽里仍然寫了第一種方法里的那段meta代碼。開發出來的頁面在安卓上沒有任何問題，但是在ios上查看的時候，頁面上字體大小會亂掉。如下：
安卓：
ios：
