IPhoneX網頁佈局

IPhoneX全面屏是十分科技化的，可是因爲其圓角和攝像頭劉海位置以及操控黑條的存在使得咱們須要去對其樣式作一些適配，沒有X的同窗能夠開啓 Xcode 9 的iPhone X 模擬器做爲學習和調試。

設計和尺寸相關

IPone型號	屏幕尺寸	屏幕密度	開發尺寸	像素密度	倍圖
4系列	3.5英寸	326ppi	320*480pt	640*960px	@2X
5系列	4英寸	326ppi	320*568pt	640*1136px	@2X
6/6s/7/8	4.7英寸	326ppi	375*667pt	750*1334px	@2X
6p/6sp/7p/8p	5.5英寸	401ppi	414*736pt	1242*2208px	@3X
X	5.8英寸	458ppi	375*812pt	1125*2436px	@3X

在設計的角度上，根據開發尺寸咱們用IPoneX和比較經典的4.7英寸屏幕進行對比。豎屏模式下不難發現X比其多了145pt，那麼咱們應該怎麼分配這145的距離呢。

1. 頂部 Navigation Bar增長44（for「劉海」）
2. 底部 Bottom Bar增長34（for「黑條Home按鈕」）
3. 中間的 Safe Area 區域（for「內容區域」）

安全區域

何爲安全區域，簡單來說就是咱們在此區域內設置一些交互的按鈕或者連接不會被影響。下圖的話底部按鈕就會受到一些影響，圖片隨意截取，請勿在乎：

viewport-fit

可喜可賀，IOS11給咱們提供了一個新特性 viewport-fit

值	說明
auto/contain	頁面默認內嵌
cover	頁面充滿屏幕

<meta name="viewport" content=" viewport-fit=cover">

viewport-fit默認狀況下是 auto 咱們能夠看一下同一個頁面不設置 viewport-fit 和設置其爲 cover 的兩種表現形式：

• 不設置：
  

• 設置爲 cover：
  

固然，在橫屏狀況下咱們能夠更清晰地看到，設置cover能夠使咱們的頁面導航和tag更加符合設計，可是內部的咱們應該怎樣進行佈局呢？是直接使用 padding 仍是有別的方法呢？

CSS constant()函數

咱們能夠經過計算其padding值來進行佈局，解決文字被埋在傳感器底部的問題。

可是IOS11給咱們提供了更簡單的辦法。WebKit 中新增了一個 CSS 函數 constant()，以及一組 四個已經定義好的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom。這四個常量分別表明了每一個方向的非安全區域的值：

那咱們試着如今給剛剛的被傳感器覆蓋的頁面增長一些css：

.con {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

是的。完美的效果。

瑕疵問題

可是若是如今咱們如今把手機換成豎屏的話，會出現一些小瑕疵，由於咱們設置的是 padding-left 和 padding-right 爲安全區域外的變局的常量，因此當咱們豎過來後，豎屏模式的 safe-area-inset-left 和 safe-area-inset-right 爲0，那麼文字仍是會貼邊的。

新的CSS函數 min() 和 max() 能夠幫咱們在不經過JS的狀況下簡單解決這個問題。（PS：現Safari暫未支持）

@supports(padding: max(0px)) {
    .con {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

這樣的話 padding-left 會取較大的那個值。當 safe-area-inset-left 爲0時候，其值會爲 12px。

本文講的一些方法對於現階段的IPhone網頁佈局其實仍是有一些兼容問題

• constant() 須要咱們對不支持的瀏覽器作一些兼容回退，而且CSS工做組對這個方法使用了不一樣的名稱
• max() 和 min() 方法現階段尚未支持，咱們仍是要採用判斷橫豎屏的方法進行動態的設置，或者直接也拋棄 constant() 作固定的padding值。
• 在使用定位的時候若是和理想效果有誤差能夠試試設置 body,html 的高度爲 100%

全屏時代即未來臨，將來咱們應該有更多的方法進行網頁佈局。

本文部分圖片和思想來自designing-websites-for-iphone-x