CSS：是否广泛支持视图高度 (vh) 和视图宽度 (vw) 单位？答案

【问题标题】：CSS: Are view height (vh) and view width (vw) units widely supported?CSS：是否广泛支持视图高度 (vh) 和视图宽度 (vw) 单位？
【发布时间】：2014-02-07 09:34:47
【问题描述】：

我正在使用 100vh 使 div 垂直居中，行高。 This site 对 vh 和 vw 的支持率约为 70%，这是一个公平的评估吗？您是否建议在构建站点时使用视口单位？我知道这有点主观，我只是在寻找比我更有经验的网络开发人员的意见。

编辑：感谢大家的投入，我确实希望它在移动设备上看起来不错，所以我想我必须放弃 vh。

【问题讨论】：

请为此创建一个新问题；看看我的帖子，我刚刚添加了关于移动设备的部分
好的，我会编辑出来的。
caniuse.com/#search=vh

标签： css viewport-units

【解决方案1】：

同时使用 CSS vh 和 jQuery，这样更安全。
jQuery 示例：

var clientHeight = $( window ).height();
  $('.element').css('height', clientHeight);

和 CSS：

.element {height: 100vh;}

【讨论】：

这似乎很痛苦
生活是痛苦的。任何说不同的人都在卖东西。

【解决方案2】：

在我看来，统计数据很清楚，这是一个公平的评估。

我认为必须由您做出决定。如果您想使用最新最先进的技术让您的网站经得起未来考验，但又意识到目前存在一些问题，那么很好，那就去吧。

如果您不准备在您的在线形象上投入更多资金，那么请坚持使用旧方式，这绝不是错误的。

编辑：当我想创建响应式设计时，我首先开始为移动设备开发，然后创建桌面版本，以确保我的视口都能正常工作，因为在某些方面缺乏移动支持（尤其是 vmax）。但是关于这个，你可以问 50 个人，他们都会说其他话的可能性很大。

【讨论】：

【解决方案3】：

视口单元很棒，但大多数移动浏览器供应商设法使vh 在实践中无法使用。

当你开始滚动或改变滚动方向时，地址栏要么消失要么回来；然后你停下来，松开你的手指，vh 值将突然与任何使用它的元素一起更新，从而导致 UX 噩梦（用户不希望在滚动结束时调整任何内容，改变现有元素的比例，重新布局内容等）。

【讨论】：

【解决方案4】：

你链接到answers your question的页面真的。

这取决于您需要支持的浏览器。

IE9 中的部分支持是指支持“vm”而不是“vmin”。 iOS7 中的部分支持是由于 vh 单元的错误行为。所有其他部分支持是指不支持“vmax”单位。

这表明在 iOS7 中使用视口单位可能是“错误的”。我不建议使用视口单位，而是使用：

像素：例如height: 500px;
百分比：例如height: 50%;

这些值得到广泛支持，将产生最佳结果。

【讨论】：

像素和百分比不能总是创造出 vm 提供的东西。
非常正确，目前即使在需要 vh 的地方我也无法使用 %

【解决方案5】：

好吧，您可以看到它已经用于桌面浏览器，但在移动设备上的支持非常有限。所以这实际上取决于你是想创建一个在计算机上看起来不错的网站，还是一个更兼容的基于像素的网站，也可以在手机上运行。

【讨论】：

【解决方案6】：

这是一个很好的简单 JS 脚本，我用来确保 vh 单元可以在所有浏览器上工作（几个月前我看到了这个并从那时起一直在使用它）

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

我相信同样的方法也可以用于其他目的。

【讨论】：