Safari CSS 规则 vh 单位？答案

【问题标题】：Safari CSS rule vh-units?Safari CSS 规则 vh 单位？
【发布时间】：2014-06-06 10:15:24
【问题描述】：

有人知道是否有针对 Safari vh 规则的修复吗？

#what{
 min-height:70vh;
}

在所有浏览器中一切正常，但仅在 Safari 中无法识别？是否有针对 safari 的修复，我们可以在 css 中使用 VH 规则？

【问题讨论】：

safari 7.0 支持 vh 单位。 caniuse.com/#search=vh
这为 Safari 中的重绘问题提供了修复：github.com/rodneyrehm/viewport-units-buggyfill
Safari 6.0+ 支持 vh 和 vw。 [查看此链接]w3schools.com/cssref/css_units.asp

标签： html css safari viewport-units

【解决方案1】：

在这个 JavaScript 中使用 rem 而不是 Vw/Vh。 “运行代码 sn-p”可能会造成混淆，导致其窗口通过缩放“调整大小”。要对此进行测试，只需将此代码复制到某个 html 文件中，然后在 Safari 和其他浏览器中运行（或参见“整页”）。

<!DOCTYPE html>
<head>
<script language="javascript" type="text/javascript">
(function (doc, win) {
        var docEl = doc.documentElement,
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;

                docEl.style.fontSize = clientWidth + 'px';
                docEl.style.display = "none";
                docEl.clientWidth; // Force relayout - important to new Android devices
                docEl.style.display = "";
            };
 
        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;

        // Test rem support
        var div = doc.createElement('div');
        div.setAttribute('style', 'font-size: 1rem');

        // Abort if browser does not recognize rem
        if (div.style.fontSize != "1rem") return;

        win.addEventListener('resize', recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<style>
    @charset "utf-8";
    *{padding: 0;margin: 0;}
    div {position:fixed;width:40%;height:30%;background-color:yellow;color:blue;font-size:0.02rem;}
</style>
</head>

<body>
    <div>in this case 0.01 rem == 1vw . You need to remove body margins.</div>
</body>

</html>

如需更多解释，请参阅我找到的这篇文章。 http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing

【讨论】：

【解决方案2】：

根据你的代码，你可以使用这个技巧：

在vh值前面使用%或em，或像素，以便不支持的浏览器取值：

.this{
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
}

【讨论】：