跳到主要内容

移动端适配 iPhoneX 等机型底部

iPhoneX 添加了底部导航跳，所以在写移动端网页的时候要进行处理

1. meta viewport 添加 viewport-fit=cover 属性​

<meta name="viewport" content="width=device-width, viewport-fit=cover" />

viewport-fit 有三个值:

  1. contain: 可视窗口完全包含网页内容(左)
  2. cover: 网页内容完全覆盖可视窗口(右)
  3. auto: 默认值，跟 contain 表现一致

2. CSS 添加 safe-area-inset-bottom​

padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2 */
/* env() 和constant() 要同时存在，且顺序不能改变 */

根据具体情况添加