Question

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

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

Answer 1

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

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

和CSS：

.element {height: 100vh;}

Answer 2

在我看来，统计数据显然是一个公平的评估。

我认为必须由你做出决定。如果您希望使用最新的最佳技术为您的网站提供面向未来的证明，但是您知道目前存在一些垮台，那就太棒了，那就去吧。

如果您不准备在网上进行更多投入，那么坚持旧方式，这绝不是错误的。

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

Answer 3

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

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

Answer 4

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

Answer 5

您真正链接到answers your question的页面。

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

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

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

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

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

Answer 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`);
});

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

CSS：广泛支持视图高度（vh）和视图宽度（vw）单位吗？

6 个答案: