为什么我的网站在移动 Safari 中的地址栏后面开始？答案

【问题标题】：Why does my website start behind the address bar in mobile safari?为什么我的网站在移动 Safari 中的地址栏后面开始？
【发布时间】：2019-08-18 10:41:28
【问题描述】：

我的网站在移动 safari 中一路上升，徽标的顶部被永久可见的地址栏遮挡。应该在代码中进行哪些更改以使网站在地址栏下方开始（正常）？

我遇到问题的网站是：https://www.chroma.nl/chromamichiel

编辑：部分 html 是基于 google 的这个演示：https://googlechromelabs.github.io/ui-element-samples/parallax/，这似乎在移动 safari 中运行良好......但是我无法发现导致这种不一致的任何差异。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: grey;
}
.viewport {
  height: 100%;
  width: 100%;
  
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}
.width {
    width: 90%;
    margin: auto;
}
.item {
height: 2000px;
width: 100%;
background-color: blue;
background-image: url(www.lorempixel.com/1000/1000/sport/);
background-size: cover;
}

<body> 
  <div class="viewport" > 
    <div class="width">
      <div class="item">
      </div>
    </div>
  </div>
</body>

【问题讨论】：

请在问题本身添加minimal reproducible example。见Something in my web site or project doesn't work. Can I just paste a link to it?

标签： html ios css mobile safari

【解决方案1】：

你的 html 看起来像这样

<body> 
  <div class="viewport" > 
    <div style="max-width: 1200px; margin:auto;">
      ...
    </div>
  </div>
</body>

试试这个 css 看看它是否能提供更多跨浏览器的结果。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
}
body {
  font-size: 1rem;
  font-display: swap;
  color: #555;
  background-color: darkgrey;
  -webkit-font-smoothing: antialiased;
}
.viewport {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}
.viewport > div {
    max-width: 1200px;
    margin: auto;
}

【讨论】：

谢谢，如果没有在视口中指定高度和宽度，它会破坏网站。当添加回来 height:100% 和 width:100% 问题仍然存在......