iphoneX的底部適配
在項目中因為底部tab欄在iphonex的顯示問題
- 方法一
@media only screen and (width: 375px) and (min-height: 690px){
#app {
padding-bottom: 0.34rem;
}
}
- 方法二
第一步：新增 viweport-fit 屬性，使得頁面內(nèi)容完全覆蓋整個窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
第二步：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
第三步：fixed 元素的適配
- 類型一：fixed 完全吸底元素（bottom = 0）
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
- 類型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側(cè)邊廣告” 等
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
