CSS：是否广泛支持视图高度 (vh) 和视图宽度 (vw) 单位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21624014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Are view height (vh) and view width (vw) units widely supported?
提问by Ber
I'm using 100vh to center a div vertically with line-height. This siteputs support for vh and vw at around 70%, is that a fair assessment? Would you recommend using viewport units when building a site? I know this is a bit subjective, I'm just looking for opinions from more experienced web developers than I.
我正在使用 100vh 以行高垂直居中 div。该网站对 vh 和 vw 的支持率约为 70%，这是一个公平的评估吗？您会建议在构建站点时使用视口单位吗？我知道这有点主观，我只是在寻找比我更有经验的 Web 开发人员的意见。
EDIT: Thanks for the input everyone, I do want it to look good on mobile, so I guess I'll have to forgo vh.
编辑：感谢大家的输入，我确实希望它在移动设备上看起来不错，所以我想我将不得不放弃 vh。
采纳答案by CodeFanatic
The statistic is clearly and it is a fair assessment, in my point of view.
在我看来，统计数据很清楚，而且是一个公平的评估。
I think the decision has to be made by you. If you want to future-proof your website using the latest greatest technology, but are aware that there are currently some downfalls, then great, go for it.
我认为决定必须由你做出。如果您想使用最新的最伟大的技术来使您的网站面向未来，但又意识到目前存在一些缺陷，那就太好了，那就去做吧。
If you are not prepared to invest a little more into your online presence, then stick to the old way, which is in no means wrong.
如果您不准备在您的在线业务上多投资一点，那么请坚持旧的方式，这绝对没有错。
EDIT: When I want to create a responsive design I start developing for Mobile Devices first and then create the Desktop Version, to ensure that my viewports all work correctly, since the Mobile support is lacking at some points(especially vmax). BUT about this you could ask 50 guys and the chances that they all will say something else are pretty good.
编辑：当我想创建一个响应式设计时，我首先开始为移动设备开发，然后创建桌面版本，以确保我的视口都正常工作，因为在某些点（尤其是 vmax）缺乏移动支持。但是关于这个，你可以问 50 个人，他们都会说其他事情的可能性非常好。
回答by user1473054
use both CSS vh and jQuery, it's safer.
jQuery example:
使用 CSS vh 和 jQuery，它更安全。
jQuery 示例：
var clientHeight = $( window ).height();
$('.element').css('height', clientHeight);
and CSS:
和 CSS：
.element {height: 100vh;}
回答by Dario M. Mannu
Viewport units are great but most mobile browser vendors managed to make vhunusable in practice.
视口单元很棒，但大多数移动浏览器供应商vh在实践中都设法使其无法使用。
When you start scrolling or change scrolling direction, the address bar will either disappear or come back; then you stop, release your finger and the vhvalue will suddenly be updated alongside any element using it resulting in a UX nightmare (user not expecting anything to resize at the end of scrolling, changing proportions of existing elements, re-layout of content, etc).
当你开始滚动或改变滚动方向时，地址栏要么消失要么回来；然后你停下来，松开你的手指，vh值会突然与使用它的任何元素一起更新，从而导致 UX 噩梦（用户不希望在滚动结束时调整大小，改变现有元素的比例，重新布局内容等）。
回答by AfromanJ
The page you have linked to answers your questionreally.
您链接的页面确实回答了您的问题。
It depends what browsers you need to support.
这取决于您需要支持哪些浏览器。
Partial support in IE9 refers to supporting "vm" instead of "vmin". Partial support in iOS7 is due to buggy behavior of the vh unit. All other partial support refers to not supporting the "vmax" unit.
IE9 中的部分支持是指支持“vm”而不是“vmin”。iOS7 中的部分支持是由于 vh 单元的错误行为。所有其他部分支持是指不支持“vmax”单元。
This states that using viewport units could be 'buggy' in iOS7. I wouldn't recommend using viewport units, but instead use:
这表明在 iOS7 中使用视口单位可能是“错误的”。我不建议使用视口单位，而是使用：
- Pixles : e.g.
height: 500px; - Percentage : e.g.
height: 50%;
- 像素：例如
height: 500px; - 百分比：例如
height: 50%;
These values are widely supported and will produce the best results.
这些值得到广泛支持，将产生最佳结果。
回答by Kroltan
Well, you can see it's already there for desktop browsers, and support on mobile devices is quite limited. So it actually depends on whether you want to create a site that looks good on computers, or a more compatible pixel-based site that works on phones too.
好吧，您可以看到它已经用于桌面浏览器，并且对移动设备的支持非常有限。所以这实际上取决于您是想创建一个在计算机上看起来不错的网站，还是一个更兼容的基于像素的网站，也可以在手机上使用。
回答by Waelmas
Here is a nice simple JS script I use to make sure vh units will work on all browsers (A few months ago I saw this and been using it since then)
这是一个很好的简单 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`);
});
I believe the same approach could be used for other purposes as well.
我相信同样的方法也可以用于其他目的。
