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%

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