適配iphone X

首先須要爲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);
}