适用于 iPhone 的 MS Edge/Safari 中的不同行为-解网

问：

我在下面插入代码。在 Edge 或 iPhone 上的 Safari 中查看时，会出现这种奇怪的不同行为。我希望当页面向下滚动时，即使动态工具栏正在缩小，页面的高度也不会改变。在Safari中，这正是发生的事情。在 Edge 中，标题和截面会更改高度以填充所有视口。我也尝试使用和单位，但这种奇怪的行为根本没有改变。你知道为什么会这样吗？headerlvhsvh

HTML 代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <title>Example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="background"></div>
        </header>
        <section>
            <div class="container">
            </div>
        </section>
    </body>
</html>

CSS 代码

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}

html{
    background-color: #151515;
}

body{
    font-family: 'Poppins', sans-serif;
}

header{
    width: 100%;
    height:  100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 0;
}



.background{
    position: absolute;
    background-color: #151515;
}

section{
    position: relative;
    height:100vh;
}

.container{
    width: 100%;
    height: 100%;
    background-color: #CE3003;
}

编辑

只是一个例子。在第一个法师中，你可以看到刚刚打开的页面。单词 example 的尺寸仅以百分比给出。当您向下滚动页面时，页面的黑色部分（对应于标题）会变大。这也反映在扩大的单词的维度上。以百分比表示维度的任何其他内容也将执行相同的操作。

HTML CSS iPhone Microsoft-Edge Mobile-Safari

适用于 iPhone 的 MS Edge/Safari 中的不同行为

Different behaviour in MS Edge/Safari for iPhone

评论