對於早期蘋果對於 iphone x 的設計布局意見如下：iphone系列出的越來越多，如果只是使用@media來做適配的話，老**想要適配新機型還是有一定侷限性的。今天去搜了搜相關的解決方法，那麼就來總結一下。
核心內容應該處於 safe area 確保不會被裝置圓角(corners)，感測器外殼(sensor housing，齊劉海) 以及底部的 home indicator 遮擋。也就是說 我們設計顯示的內容應該盡可能的在安全區域內。
下面兩張圖簡單的描述了安全區域的劃分細節：
通過在meta標籤中設定viewport-fit來實現安全區適配
name
="viewport"
content
="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
>
viewport-fit取值：值描述
viewport-fit=auto預設值，頁面內容顯示在safe area內
viewport-fit=cover頁面內容充滿螢幕
在ios 11中的webkit包含了乙個新的css函式constant()，以及一組四個預定義的常量：safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom。當合併一起使用時，允許樣式引用每個方面的安全區域的大小。
只有當我們設定viewport-fit=cover的時候上述的常量才能生效。
寫法如下：
/* 相容 ios < 11.2 */
body
/* 相容 ios >= 11.2 */
body
constant和env一起使用。 Android 劉海屏適配總結
劉海屏手機因為比平常的手機多了一塊頂部的遮擋性劉海，所以會造成頂部 以及搜尋框的遮擋，而且有些廠商的手機 vivo 華為 預設是在 無狀態列 的介面將狀態列進行黑化顯示，這時候會導致系統下移，從而導致底部的一些 ui 被截斷。除此之外，一些控制項的顯示規則還會受到影響，如 popupwindow 的...
android 全面屏 劉海屏有效適配
手機廠商追求高使用者體驗，螢幕寬高比越做越高。17 9 19 10 18 9 18.5 9所謂全面屏。原來一般主流手機1920 1080解析度 16 9高寬比。如果沒有單獨去配置屬性，會導致在超過17 9寬高比手機上，底部一大塊黑底。在應用配置檔案androidmanifest.xml中顯式宣告支援...
使用 css 適配 iphoneX 劉海屏
iphonex 劉海螢幕導致 h5 頁面不能正常的全屏顯示了，就需要對 頁面進行適配，下面就詳細說說如何適配。首先上一張適配之前的圖 可以看到頁面頂部被遮擋，底部貼著最下面 ios11 增加新特性，增加webkit 的 css 函式，css 預定義變數 四個預定義變數為設定安全區域和邊界的距離，如下...