为什么手机底部多了一个space？

Question

我有一个响应移动设备的网站。在大多数设备上，它工作正常，但在 iPhone 11/11 pro 上，背景在页面底部可见。在做了一些研究之后，似乎 CSS 高度属性可能是一个问题。建议使用 VH 而不是 % 但在将 HTML BODY 更改为 100vh 后，它会将所有内容向下推（但底部不再显示背景）。见下文 - 红色是背景颜色，棕色是图像。

我的所有内容都在屏幕内。另外 - 如果我横向旋转设备然后向后旋转，那就完美了！

我认为这与这个'notch'想法有关 - https://css-tricks.com/the-notch-and-css/

HTML

<body class="bkground">
<div class="main">
    <div class="wrapper">
        <div class="content" role="main">
            <div class="main-form-container">
                <form id="auth-form" method="post" class="centered">
                   <!-- Content here -->
                </form>
            </div>
            <div class="accept-connect-container">
                <form method="post" class="accept-form">
                   <!-- Content here -->
                </form>
            </div>
        </div>
    </div>
</div>

CSS

@media (min-height: 640px) and (max-height:699px) {
html body {
    height: 100%;
}
.wrapper {
    background-image: url('../img/desktop-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: fill;
    -moz-background-size: fill;
    -o-background-size: fill;
    background-size: fill;
    background-position: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.main {
    height: 100%;
}
.content {
    width: 350px;
   }
}

编辑

现在可以与以下 CSS 一起使用，但不确定这是否是实际修复。它可能会破坏其他设备，但根据 Chrome 响应工具，它没有。不好说。

CSS - 将 BODY 和 MAIN 的高度从 % 更改为 VH tag/class

@media (min-height: 640px) and (max-height:699px) {
html body {
    height: 100vh;
}
.wrapper {
    background-image: url('../img/desktop-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: fill;
    -moz-background-size: fill;
    -o-background-size: fill;
    background-size: fill;
    background-position: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.main {
    height: 100vh;
}
.content {
    width: 350px;
   }
}

Answer 1

您已修复 min-height 和 max-height。

将它们修复为 100% 或 100vh.It 即可。

@media (max-height:100%) {
html body {
    height: 100vh;
}
.wrapper {
    background-image: url('../img/desktop-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: fill;
    -moz-background-size: fill;
    -o-background-size: fill;
    background-size: fill;
    background-position: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.main {
    height: 100vh;
}
.content {
    width: 350px;
   }
}

为什么手机底部多了一个space？

Why is there an extra space at the bottom for mobile?

html

css

iphone

ios