38

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

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

4

6 回答 6

36

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

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

和 CSS：

.element {height: 100vh;}
于 2015-01-23T18:47:40.963 回答
17

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

我认为必须由您做出决定。如果您想使用最新的最先进的技术来保证您的网站的未来发展，但要知道目前存在一些缺陷，那么很好，那就去做吧。

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

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

于 2014-02-07T09:45:13.010 回答
10

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

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

于 2017-01-27T23:09:38.500 回答
5

您链接到的页面确实回答了您的问题。

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

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

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

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

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

于 2014-02-07T09:48:27.957 回答
3

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

于 2014-02-07T09:44:59.627 回答
-1

这是一个很好的简单 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`);
});

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

于 2020-05-22T19:17:49.963 回答