Борьба с Нотчем. Что я делаю неправильно?

Question

Создаю небольшой сайт для бара моего друга, но я не могу понять, почему я не могу пробиться через отметку в 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);
}

flamnin go .steeple.xyz

Здесь он проходит мимо "метки" в Safari

Здесь на него влияет "вырез" в Chrome

Answer 1

После некоторых проб и ошибок я сузил все до «initial-scale = 1» в метатеге. Не уверен, почему, возможно, какой-нибудь фанк CSS или JS.

Пробовал несколько разных чисел:

0,9, кажется, хорошо подходит между chrome и сафари в пейзаже и портрете.

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