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

Question

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

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

Answer 1

以我的观点来看，统计显然是一个公平的评估。

我认为这个决定必须由你来决定。如果你想用未来最好的技术来保护你的网站，但是意识到目前有一些垮台，那么很好，那就去做吧。

如果您不打算多投入一些网上业务，那么坚持以前的做法并不意味着错误。

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

Answer 2

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

Answer 3

您真的需要请联系answers your question的页面。

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

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

这表明在iOS7中使用视口单元可能是'错误的'。我不会推荐使用视口单元，而是使用：

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

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

Answer 4

同时使用CSS vh和jQuery，更安全。
jQuery的例子：

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

和CSS：

.element {height: 100vh;} 

Answer 5

视口单位是伟大的，但大多数移动浏览器厂商设法使vh不可用在实践中。

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