For UI 設計師

Apple 官方設計規範標示出，比起 4.7 吋的 iphone，iphone x 高多了 145 pt

Alt text
source: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

畫面尺寸為 375 x 812
Status Bar 高度由 20pt 增長為 44pt

Alt text
source: https://designcode.io/ios11-iphone-x

扣除掉上方劉海 ( 高 44 pt )，以及下方的 home indicator ( 高 34 pt )，安全區域( Safe Area )就是 375 x 734
包含 Home Indicator，Tab Bar 高度由 49pt 增長為 83pt
鍵盤高度由 216pt 增長為 291pt

Alt text

當橫向擺放時，Home indicator 高會變成 21 pt，左右各有 44 pt 的留白空間，安全空間會變成 724 x 354

Layout Margin

不管是直橫向，除了上面提到安全區域外，通常文字&按鈕等重要元件需要向內縮 15 pt 稱為 Layout Margin。

Alt text

別想改 Home indicator 顏色

Home indicator 會依據周圍背景，決定自身要變黑或白，在撥放影片時，會將自身隱身，在設計時注意不要加進去了。

做UI設計時要避免以下狀況：

  1. 操作不要與安全區交疊
  2. 滿版圖片要拉到位

Alt text

  1. 操作不要與 Home indicator交疊
  2. 底部 tab bars 背景延伸到底

Alt text

For 前端工程師

Viewport-fit=cover

要使用iPhone X的全螢幕顯示網頁內容的話，就將viewport設定為：

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

Alt text
就會使用到所有螢幕空間

Alt text

source: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

但這時，因為這日系劉海( Notch ) 擋住畫面內容，不得不再多加上 safe-area-inset-*

1
2
3
4
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

此屬性能夠讓 iphone x 自動判定在直、橫放都可以保留一定的空間。

Alt text

Source: https://medium.com/%40onopko/iphone-x-%E3%81%AE-safari-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B-web-%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E8%A1%A8%E7%A4%BA-58da5f503d0b