html - 将方向从横向切换到纵向后出现白条(仅限 iPhone)

Question

查看此链接以获取有关该问题的视频。真的不知道还能如何解释: 将 iPhone 7 从横向切换为纵向后，屏幕底部会出现一个白条。有趣的是，白色栏似乎与菜单栏大小相同。这是问题的屏幕录制:

http://mintrain.co.uk/whitebar.MP4

任何想法都会很棒!

HTML:

<div class="header">
    <div class="maxw">
        <img id="logo" src="images/whitelogo.svg">
        <div class="nav">
            <ul>
                <li>
                    <a href="index.html">HOME</a>
                </li>
                <li>
                    <a href="prices.html">PRICES</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

.header {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0px;
    height: 60px;
    width: 100%;
    z-index: 10;
}

#logo {
    height: 60px;
    padding-left: 10px;
}

.nav {
    position: relative;
    float: right;
    height: 60px;
    top: 10px;
}

Answer 1

我很确定这与你如何管理高度有关。你改变了它的单位吗？虽然我不喜欢使用 vh，但尝试将其更改为 100vh 看看是否有变化，如果有，则意味着您将其与高度单位搞混了。