移動端的布局不同于pc端，首先我們要知道在移動端中，css中的1px并不等于物理上的1px，因?yàn)槭謾C(jī)屏幕的分辨率已經(jīng)越來越高，高像素但是屏幕尺寸卻沒有發(fā)生太大變化，那就意味著一個物理像素點(diǎn)實(shí)際上塞入了好幾個像素。

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素。css中的px就可以看做是設(shè)備的獨(dú)立像素，所以通過devicePixelRatio，我們可以知道該設(shè)備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當(dāng)于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現(xiàn)在還并不能完全信賴這個東西。

還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。

所以在做移動端開發(fā)時，為了使移動端的頁面在不同的手機(jī)上同樣的大小來顯示，我們可以將頁面的寬度固定，然后獲取設(shè)備的寬度，可以得到我們之前設(shè)定的寬度與設(shè)備寬度的比例，再使用HTML5新增的viewport來對頁面進(jìn)行縮放，并固定不允許用戶再重新縮放。

在看viewport的具體用法之前，我們先搞清楚幾個概念。

1、layout viewport：

layout viewport 是網(wǎng)頁的所有內(nèi)容，他可以全部或者部分展示給用戶。

2、visual viewport

visual viewport 就是當(dāng)前顯示給用戶內(nèi)容的窗口，你可以拖動或者放大縮小網(wǎng)頁。

viewport具體用法為: 

使用該meta標(biāo)簽時，在content中寫屬性，用逗號隔開

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />