移動端的布局不同于pc端，首先我們要知道在移動端中，css中的1px并不等于實體上的1px，因為手機螢幕的分辨率已經越來越高，高像素但是螢幕尺寸卻沒有發生太大變化，那就意味着一個實體像素點實際上塞入了好幾個像素。
在移動端浏覽器中以及某些桌面浏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：裝置實體像素和裝置獨立像素的比例，也就是 devicePixelRatio = 實體像素 / 獨立像素。css中的px就可以看做是裝置的獨立像素，是以通過devicePixelRatio，我們可以知道該裝置上一個css像素代表多少個實體像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當于2個實體像素。但是要注意的是，devicePixelRatio在不同的浏覽器中還存在些許的相容性問題，是以我們現在還并不能完全信賴這個東西。
還有一個因素也會引起css中px的變化，那就是使用者縮放。例如，當使用者把頁面放大一倍，那麼css中1px所代表的實體像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的實體像素也會減少一倍。
是以在做移動端開發時，為了使移動端的頁面在不同的手機上同樣的大小來顯示，我們可以将頁面的寬度固定，然後擷取裝置的寬度，可以得到我們之前設定的寬度與裝置寬度的比例，再使用HTML5新增的viewport來對頁面進行縮放，并固定不允許使用者再重新縮放。
在看viewport的具體用法之前，我們先搞清楚幾個概念。
- layout viewport：
- layout viewport 是網頁的所有内容，他可以全部或者部分展示給使用者。
- visual viewport
- visual viewport 就是目前顯示給使用者内容的視窗，你可以拖動或者放大縮小網頁。
不太懂的看下圖就知道了：
viewport具體用法為:
使用該meta标簽時，在content中寫屬性，用逗号隔開
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
| 屬性名 | 備注 |
|---|---|
| width | 設定layout viewport 的寬度，為一個正整數，使用字元串"width-device"表示裝置寬度 |
| initial-scale | 設定頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許使用者的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許使用者的最大縮放值，為一個數字，可以帶小數 |
| height | 設定layout viewport 的高度，這個屬性對我們并不重要，很少使用 |
| user-scalable | 是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
| – | – |
| target-densitydpi | 值可以為一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字元串中的一個 |
最後一個屬性為安卓特有，并且安卓已經決定要廢棄target-densitydpi 這個屬性了，是以這個屬性我們要避免進行使用 。
下面我們來看看移動端布局具體的代碼：
<head>
<title>Test Page</title>
<script>
var deviceWidth = parseInt(window.screen.width); //擷取目前裝置的螢幕寬度
var deviceScale = deviceWidth / 640; //得到目前裝置螢幕與640之間的比例，之後我們就可以将網頁寬度固定為640px
var ua = navigator.userAgent;
//擷取目前裝置類型（安卓或蘋果）
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no">');
}
</script>
</head>