解决缺口。我在做什么错？

Question

[为朋友的酒吧制作了一个小网站，但我不明白为什么我无法超越Chrome中的“缺口”。 Safari在移动设备上看起来还不错，但Chrome拥有令人毛骨悚然的空白。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

 * {
  margin: 0;
  -webkit-padding-left: 16px env(safe-area-inset-left);
  -webkit-padding-right: 16px env(safe-area-inset-right);
}

flamningo.steeple.xyz

Answer 1

编辑：将此代码添加到您的网站，以便它将自动检测它是否在电话中。这样可以解决您的问题，因为它会自动检测网络大小并围绕它进行自我调整。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">