100vh 在 Windows 的 safari 中不起作用吗？答案

【问题标题】：Does 100vh not work in safari in windows?100vh 在 Windows 的 safari 中不起作用吗？
【发布时间】：2016-06-04 09:06:04
【问题描述】：

我一直在构建一个网站的首页，以学习一些 Web 开发，在我测试过的所有浏览器（Windows）上运行良好，除了 safari。我有一个 html 步骤，因此我将部分样式设置为 100vw 和 100vh。在 safari 上，它们的高度似乎为 0；

<body>
    <div id="wrapper">
        <div class="main">
            <section id="slide-one" class="slide"></section>
            <section id="slide-two" class="slide"></section>
.
.
.

以及对css的总结：

.slide {
    position: relative;
    padding-top: 0px;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

任何想法我做错了什么？

【问题讨论】：

标签： html css safari cross-browser

【解决方案1】：

你可以试试这个

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

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

参考链接 Detect Safari using jQuery

【讨论】：

iphone safari 也裁剪网页：/

【解决方案2】：

-webkit-height 超过了正常高度，因为该值为100%，它将与.main 一样高。这仅发生在 Safari（可能还有其他一些 WebKit 浏览器）中，因为 Chrome 无法识别 -webkit-height。

【讨论】：

感谢您的快速响应。不幸的是，这并没有什么不同。这是供您参考的网站：www.teamthie.com
@DB1500 很遗憾，我无法测试 Safari。我唯一能想到的是对视口单元的支持，但根据Can I Use，它们在 Safari 6.1 之后就很好了。
@DB1500 太好了，该网站实际上已启动并正在运行，可以检查！开发人员/用户多次发布指向他们当前工作的网站的链接，一旦错误/错误/问题得到回答/完成，链接就失效了。谢谢。

【解决方案3】：

Safari 5.1.7 是为 Windows 开发的最后一个 Safari 版本。它是在 2012 年之前推出的，因此它不支持大多数新的 CSS3 属性。

【讨论】：