Menu
<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
On my iPad the 100vh div size is 1256 pixels. (if your most recent scroll was upward)
window.innerHeight is 1217.
screen.height is 1024.
window.outerHeight is 0.
documentElement.clientHeight is 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?
I also have my font size set to 10vh. What is that exactly in pixels?
I am not using 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.
840
Ex: The value of “1vh” will be 10 pixels (px), and the value of “10vh” will be 100px if the viewport is 1200px wide and 1000px high. Width of the Viewport (vw): The width of the viewport is used to calculate this unit. A value of “1vw” corresponds to 1% of the viewport width.
You can use the window. innerHeight property to get the viewport height, and the window. innerWidth to get its width. let viewportHeight = window.
window. innerHeight does not always give you the height of an element with a height of 100vh . window. innerHeight changes as the URL bar appears and disappears. In contrast, 100vh is the viewport height only when the URL bar is hidden.
You can calculate vh in pixels with a line of code:
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';
}
You can use offsetHeight or clientHeight to get the height of an element in px.
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.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
