<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.
documentElement.clientHeight
; it is for me. Not sure how you're getting 4016 there...documentElement.clientHeight
gives the correct results for me. Maybe try providing a minimal, complete, and verifiable example in the question itself and confirm the problem still exists there? :)window.document.body.clientHeight
?