移動端頁面怎麼適配ios頁面

1、viewport 簡單粗暴的方式：

直接設定viewport為320px的1.3倍，將頁面放大1.3倍。

為什麼是1.3？

目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那麼以1.29倍也就約等於1.3了。

2、ip6+ 的css media query

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2)

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)

ps: 也可以直接使用實際的device-width：如 device-width : 375px

在原有頁面的基礎上，再針對相應的螢幕大小單獨寫樣式做適配。

3、rem布局

rem是css3新增的一種單位，並且移動端的支援度很高，android2.x+，ios5+ 都支援。rem是相對於dom結構的根元素來設定大小，也就是html這個元素。相較於em單位，rem使用上更容易理解及運用。

rem與px的換算可以檢視**：

假設，html我們設定font-size:12px; 也就是說12px相對於1rem，那麼18px也就是 18/12 = 1.5rem。

那麼我們以320px的設計布局為基準，將html設定為font-size:100px，即100px = 1rem。(設定100px是為了方便計算)那麼可以將大部分px單位除以100就可以直接改成rem單位了。

rem如何做響應式布局？

1、如果僅僅是適配ip6+裝置，那麼使用media query就行。

偽**如下：

/*320px布局*/

html

body

/* iphone 6 */

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2)

}/* iphone6

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2)}

改成之後要帶空格才生效：

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2)}