Friday, April 13, 2018

Javascript get 100vh in pixels

By Hường Hana 2:30 AM , Leave a Comment 
<html>     <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.

iPhone SE Proof

3 Answers

Answers 1

Is it because your missing this in a 

 <head>

tag?

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answers 2

You can use offsetHeight or clientHeight to get the height of an element in px.

The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.

The clientHeight property 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>

Answers 3

You can calculate vh in pixels with a line of code:

let _1vh = Math.round(document.documentElement.clientHeight / 100)

So you can have a function for it:

function vhToPixels (vh) {   return Math.round(document.documentElement.clientHeight / (100 / vh)) + 'px'; }
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment