1.移動端開發視窗口的添加

h5端開發下面這段話是必須配置的

<meta name="viewport" content="width=device-width,
 initial-scale=1, user-scalable=no">

• 1

其它相關配置內容如下：

• width viewport 寬度(數值/device-width)

• height viewport 高度(數值/device-height)

• initial-scale 初始縮放比例

• maximum-scale 最大縮放比例

• minimum-scale 最小縮放比例

• user-scalable 是否允許用戶縮放(yes/no)

• minimal-ui iOS 7.1 beta 2 中新增屬性（註意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。

2.媒體查詢的改進

之前在做移動端開發的時候，為了適配多屏幕。使用的是rem 單位。這個時候就需要根據屏幕的尺寸來來動態的設置根節點html 的font-size 值。這樣可以解決多屏幕適配的問題。
比如下面的 媒體查詢代碼

html {    //iphone5
    font-size: 62.5%;}@media (max-width: 414px) {
    html {        //iphone6+
        font-size: 80.85%;
    }
}@media (max-width: 375px) {
    html {        //iphone6
        font-size: 73.24%;
    }
}
 

這樣做的結果，有兩個很明顯的缺點。

• 適配屏幕的尺寸不是連續的。

• 在自己的 css 文件中添加大段的這樣查詢代碼。增加了 css 文件的體積。

後來參考淘寶移動端頁面適配規則，使用 js 獲取客戶端的寬度，根據設計稿的原型動態的計算font-size 的值。

詳細的內容請看這裏 根據iPhone6設計稿動態計算rem值

移動端 h5開發相關內容總結——CSS篇