適配iphone X

Charles發表於2017-12-25
iPhone

首先需要為meta標籤加上viewport-fit=cover，預設viewport-fit=contain，跟background-size類似。
當值設定為cover既可讓安全區域鋪滿全屏，就跟適配其他裝置沒什麼區別了。
但是內容會被頂部和底部的硬體遮擋，如果不想被遮擋，就需要頭部底部預留一定高度。
所以就需為body加上padding，官方提供了四個值，可以直接獲取到頭部底部以及橫屏時候的左側右側值，我們只需要在自己的容器設定上著四個值即可：
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

  • 需要注意的是，viewport-fit值不為cover設定constant()是無效的
  • 豎屏時候左側右側值為0，橫屏時候左側右側才有值

code

meta

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}

相關文章