javascript 在JS中将vh单位转换为px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34166341/
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
Convert vh units to px in JS
提问by zzzzBov
Unfortunately 100vhis not always the same as 100%browser height as can be shown in the following example.
不幸的100vh是，它并不总是与100%浏览器高度相同，如下例所示。
html,
body {
height: 100%;
}
body {
overflow: scroll;
}
.vh {
background-color: blue;
float: left;
height: 50vh;
width: 100px;
}
.pc {
background-color: green;
float: left;
height: 50%;
width: 100px;
}<div class="vh"></div>
<div class="pc"></div>The issue is more pronounced on iPhone 6+ with how the upper location bar and lower navigation bar expand and contract on scroll, but are not included in the calculation for 100vh.
这个问题在 iPhone 6+ 上更为明显，因为上部位置栏和下部导航栏如何在滚动时扩展和收缩，但不包括在100vh.
The actual value of 100%height can be acquired by using window.innerHeightin JS.
100%可以window.innerHeight在JS中使用获取height的实际值。
Is there a convenient way to calculate the current conversion of 100vhto pixels in JS?
有没有一种方便的方法来计算100vhJS 中像素的当前转换？
I'm trying to avoid needing to generate dummy elements with inline styles just to calculate 100vh.
我试图避免需要生成带有内联样式的虚拟元素来计算100vh.
For purposes of this question, assume a hostile environment where max-widthor max-heightmay be producing incorrect values, and there isn't an existing element with 100vhanywhere on the page. Basically, assume that anything that can go wrong haswith the exception of native browser functions, which are guaranteed to be clean.
出于这个问题的目的，假设一个敌对环境，其中max-width或max-height可能产生不正确的值，并且100vh页面上的任何地方都没有现有元素。基本上，认为任何可能出错的具有与原生浏览器的功能，这些都保证是干净的例外。
The best I've come up with so far is:
到目前为止我想出的最好的是：
function vh() {
var div,
h;
div = document.createElement('div');
div.style.height = '100vh';
div.style.maxHeight = 'none';
div.style.boxSizing = 'content-box';
document.body.appendChild(div);
h = div.clientHeight;
document.body.removeChild(div);
return h;
}
but it seems far too verbose for calculating the current value for 100vh, and I'm not sure if there are other issues with it.
但计算 的当前值似乎过于冗长100vh，我不确定它是否还有其他问题。
回答by Pablo Albornoz
How about:
怎么样：
function viewportToPixels(value) {
var parts = value.match(/([0-9\.]+)(vh|vw)/)
var q = Number(parts[1])
var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]]
return side * (q/100)
}
Usage:
用法：
viewportToPixels('100vh') // window.innerHeight
viewportToPixels('50vw') // window.innerWidth / 2
回答by Charlie
The difference comes from the scrollbar scrollbar.
不同之处在于滚动条滚动条。
You'll need to add the height of the scrollbar to the window.innerHeight. There doesn't seem to be a super solid way of doing this, per this other question:
您需要将滚动条的高度添加到window.innerHeight. 根据另一个问题，似乎没有一种超级可靠的方法可以做到这一点：
