如何去除iPhone X及更新机型网页显示的屏幕左右两侧内边距

核心原因 #

你遇到的左右留白是iPhone全面屏机型默认的安全区域适配机制，要取消需要同时调整viewport配置和CSS适配规则。

1. 修改viewport元标签 #

你当前的viewport配置未开启全屏适配权限，需要新增viewport-fit=cover参数，修改后代码如下：

<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
</head>
<body style="background-color: black">
</body>
</html>

2. 调整CSS适配逻辑 #

你当前代码中全局配置的左右env(safe-area-inset-right)、env(safe-area-inset-left)就是用来生成左右安全边距的，要取消左右内边距可以按需调整：

完全全屏（上下左右都不留边距） #

* {
  margin : 0;
  padding : 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body { 
  -webkit-text-size-adjust: none; 
}

仅取消左右内边距，上下保留安全边距（避免内容被刘海/底部小黑条遮挡） #

* {
  margin : 0;
  padding : 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body { 
  -webkit-text-size-adjust: none; 
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
}

3. 可选优化（内容不被遮挡） #

如果需要背景全屏铺满、但实际文本/按钮内容不被圆角刘海遮挡，可以给内容容器单独加左右安全边距：

/* 页面内容容器类名可根据实际修改 */
.page-content {
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

内容的提问来源于stack exchange，提问作者smallMars