适配iPhoneX

2022-03-21 20:46:16 浏览数 (1)

作者：汪娇娇

时间：2017年12月26日

我这里说的适配iPhoneX，是一种比较简单粗暴的适配法，就是填满整个屏幕（包括安全区域和上下左右这些边，见下图）。

1、meta标签

代码语言：javascript复制

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

2、CSS

代码语言：javascript复制

body {
    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);
}