为啥我的网站在移动 Safari 中的地址栏后面开始？
Posted
技术标签:
【中文标题】为啥我的网站在移动 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? 【参考方案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% 问题仍然存在......以上是关于为啥我的网站在移动 Safari 中的地址栏后面开始？的主要内容，如果未能解决你的问题，请参考以下文章
为啥简单的网站会在移动设备上崩溃（至少是 iOS Safari 和 Chrome）？