解决缺口。我究竟做错了什么？答案

【问题标题】：Tackling The Notch. What Am I Doing Wrong?解决缺口。我究竟做错了什么？
【发布时间】：2020-03-19 02:59:47
【问题描述】：

为我朋友的酒吧制作一个小网站，但我不明白为什么我无法超越 Chrome 中的“缺口”。 Safari 在移动设备上看起来不错，但 Chrome 有那个可怕的空白。

到目前为止，“initial-scale=1”似乎禁止该网站超越 chrome（横向模式）中的“缺口/剪切”。

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">

 #siteWrapper {
  margin-left: 16px env(safe-area-inset-left);
  margin-right: 16px env(safe-area-inset-right);
}

flamningo.steeple.xyz

Here it is pushing past the "notch" on Safari

Here it is being affected by the "notch" in Chrome

【问题讨论】：

能否提供问题的屏幕截图以便更容易诊断？
你指的是什么档次？
如果您关注instructions here，Chrome 是否会为您提供所需的行为？（请参阅显示剪裁）
@ChaseSmith 我用一些截图编辑了我的原始帖子。
@GeneSy 我用一些截图编辑了我的原始帖子。

标签： html css ios google-chrome mobile

【解决方案1】：

经过反复试验，我将范围缩小到元标记中的“initial-scale=1”。不知道为什么，可能是一些时髦的 CSS 或 JS。

尝试了一些不同的数字：

0.9 在横向和纵向方面似乎非常适合 chrome 和 safari。

<meta name="viewport" content="initial-scale=0.9, width=device-width, height=device-height, viewport-fit=cover, user-scalable=no">

@media screen and (max-width:900px) {
#siteWrapper {
margin-top: 16px env(safe-area-inset-top);
margin-left: 16px env(safe-area-inset-left);
margin-bottom: 16px env(safe-area-inset-bottom);
margin-right: 16px env(safe-area-inset-right);
  }}

【讨论】：