在Windows的Safari浏览器中100vh不起作用吗?

DB1*_*500 2 html css safari cross-browser

我正在建立以学习一些Web开发的网站的首页在我使用Safari浏览器测试过的所有浏览器(Windows)上均能正常运行。我有一个html步骤,这样我就可以将样式设置为100vw和100vh。在野生动物园中,它们的高度似乎为0;

<body>
    <div id="wrapper">
        <div class="main">
            <section id="slide-one" class="slide"></section>
            <section id="slide-two" class="slide"></section>
.
.
.
Run Code Online (Sandbox Code Playgroud)

以及CSS的摘要:

.slide {
    position: relative;
    padding-top: 0px;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}
Run Code Online (Sandbox Code Playgroud)

有什么想法我做错了吗?

Bip*_*was 5

你可以试试这个

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    //alert('Its Safari');
    $('.main').css('min-height', '650px');
}
Run Code Online (Sandbox Code Playgroud)

虽然100vh css属性可在Mac默认的Safari浏览器上运行。但是在Windows的Safari中无法正常工作。

参考链接 使用jQuery检测Safari