CSS:广泛支持视图高度(vh)和视图宽度(vw)单位吗？

Question

我使用100vh垂直居中div与行高.这个网站支持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

Viewport单元很棒但是大多数移动浏览器供应商都vh在实践中设法无法使用.

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

Answer 4

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

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

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

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

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

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