由於移動端的手機螢幕跟pc端不同，解析度也是五花八門，所以對於移動端前端頁面布局就是很大的挑戰。
不過我們既然知道了移動端跟pc端不同 就可以有針對性的進行開發，畢竟移動端的瀏覽器不牽扯到太多pc端似的各種坑爹的相容！
viewport：
不得不說的是viewport，這是移動端開發必備的乙個meta標籤屬性。
移動端裝置分為螢幕裝置大小以及瀏覽器視口大小，一般來說width表示瀏覽器視口大小，而device-width表示裝置螢幕大小。
比如iphone中safria瀏覽器預設的視口大小width=980px（不同瀏覽器預設不同），而device-width一般是320（也就是手機的寬度）；
viewport就是對視口的乙個**設定標籤。
主要引數有下面幾個：
maximum-scale：使用者可以縮放的最大值
minimum-scale：使用者可以縮放的最小值
initial-scale：viewport的預設縮放大小
width：固定viewport的寬度
height：固定viewport的高度
user-scalable：是否允許使用者縮放
前三個引數都是縮放相關的，改變的大小是網頁顯示大小。比如要讓網頁載入時候顯示兩倍大小就可以加上這個
之後就是width和height，修改這倆東西就和我們在pc上訪問網頁時候用滑鼠拖動瀏覽器來改變大小一樣。或者說是瀏覽器（頁面區域）在螢幕上的預設大小。可以是具體的數值，也可以用「device-width」和「device-height」把它設定成瀏覽器螢幕的大小。比如要把頁面寬度固定到瀏覽器的螢幕上，防止出現橫向滾動條就可以使用
最後乙個是指定是否允許使用者自己縮放，也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1，如果要禁止可以把它的值設定為0。就像下面這樣 設定了這個屬性以後它就不會縮放。一般來說為了更好的使用者體驗一般都會設定為無滾動條以及不允許縮放，如下： 最後乙個是指定是否允許使用者自己縮放，也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1，如果要禁止可以把它的值設定為0。就像下面這樣 只要把他們用逗號隔開就可以了，不過有些瀏覽器不支援width和height設定固定數值，所以最好別用那個。平時開發時候我們一般會將viewport設定為以下：
其中的意思大家可以參考上面解釋去分析。
有關viewport檢視分析詳見這裡
@media:
這是乙個css3中的**樣式，其實是乙個函式，瀏覽器看到這個函式就回去解析裡面**。
例如我們頁面中有個元素在pc瀏覽器上我們希望它顯示400*300，而在移動端不同解析度下希望它顯示為200*100、300*150不等：
我們就可以這樣去寫：
@media (min-width: 768px)
}@media (max-width: 768px)and(min-width:400px) }
@media(max-width:400px) }
這樣我們就可以把一些公共的樣式寫到乙個不用@media樣式包含的樣式中，把需要根據裝置區分顯示內容的用@media進行區分
WebApp移動端前端UI庫
frozen ui 自述 簡單易用，輕量快捷，為移動端服務的前端框架。主頁 開發團隊 qqvip fd team github demo frozenui demo index.html weui 開發團隊 wechat official design team github demo sui mo...
webapp 移動端開發
h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 將 新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式 移動端如何定義字型font family body中文字型使用系統預設即可，英文用helvetic...
移動端web app開發備忘
近期要做個手機html5的頁面，做些知識儲備，重要的點記錄下來以備興許。1.devicepixelratio 定義裝置物理象素和裝置獨立象素的比例。css中的px能夠看作是裝置的獨立象素。通過devicepixelratio。就能夠知道裝置上的乙個css畫素代表著多少個物理畫素，能夠考慮device...