Javascript 以像素为单位获得 100vh
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49268659/
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
Javascript get 100vh in pixels
提问by Curtis
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style='height:4000px;background:#EEE;'>
<div id=vh style='height:100vh;background:#AFB'>
100vh
<br>
<br>
<br>
<button onclick='show()' style='font-size:55px'>
Show
</button>
</div>
more stuff
</div>
<script>
var vh=document.getElementById('vh')
function show()
{
alert('window.innerHeight='+window.innerHeight
+', window.outerHeight='+window.outerHeight
+', screen.height='+screen.height
+', document.documentElement.clientHeight='+document.documentElement.clientHeight
+', vh.clientHeight='+vh.clientHeight)
}
</script>
</body>
</html>
http://curtastic.com/testvh.html
http://curtastic.com/testvh.html
On my iPad the 100vh div size is 1256 pixels. (if your most recent scroll was upward)
在我的 iPad 上，100vh div 大小是 1256 像素。（如果你最近的滚动是向上的）
window.innerHeight is 1217.
window.innerHeight 是 1217。
screen.height is 1024.
screen.height 是 1024。
window.outerHeight is 0.
window.outerHeight 为 0。
documentElement.clientHeight is 4016.
documentElement.clientHeight 是 4016。
Is there any way in javascript of getting this number 1256? Besides making a div and setting it to height:100vh then checking its clientHeight?
javascript 中有没有办法获得这个数字 1256？除了制作一个 div 并将其设置为 height:100vh 然后检查它的 clientHeight？
I also have my font size set to 10vh. What is that exactly in pixels?
我的字体大小也设置为 10vh。以像素为单位到底是什么？
I am not using jQuery.
我没有使用 jQuery。
I know that 100vh is taller than the visible viewport on purpose on mobile so that the browser bars can change size without altering vh. So I want the size of the screen regardless of the browser bars, which is what vh does.
我知道 100vh 比移动设备上的可见视口高，因此浏览器栏可以在不改变 vh 的情况下更改大小。所以我想要屏幕的大小而不管浏览器栏，这就是 vh 所做的。
回答by Ryan Breece
Is it because your missing this in a
是不是因为你错过了这个
<head>
tag?
标签？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
回答by Deepu Reghunath
You can use offsetHeightor clientHeightto get the height of an element in px.
您可以使用offsetHeight或clientHeight以像素为单位获取元素的高度。
The
offsetHeightproperty returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.The
clientHeightproperty returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
该
offsetHeight属性以像素为单位返回元素的可见高度，包括填充、边框和滚动条，但不包括边距。该
clientHeight属性以像素为单位返回元素的可见高度，包括填充，但不包括边框、滚动条或边距。
See the difference
看到不同
var vhele=document.getElementById('vhele')
function show()
{
console.log(' clientHeight='+vhele.clientHeight+ 'px'+' , Height with padding and border= ' + vhele.offsetHeight + 'px' );
}body{
margin:0;
}
#vhele{
padding:15px;
border:5px solid red;
}<div id="vhele" style='height:75vh;background:#AFB'>
100vh
<button onclick='show()' style='font-size:55px'>
Show
</button>
</div>回答by Madmadi
You can calculate vh in pixels with a line of code:
您可以使用一行代码以像素为单位计算 vh：
let _1vh = Math.round(window.innerHeight / 100)
So you can have a function for it:
所以你可以有一个函数：
function vhToPixels (vh) {
return Math.round(window.innerHeight / (100 / vh)) + 'px';
}
