Search code examples
javascripthtmlcssviewportresolution

How do I get CSS vw and vh in JS?

I am trying to use the CSS vw and vh values in Javascript because I would like to make them adaptive to changing certain JS variables. However, after researching different methods, the values seem to be off by a little bit because it is messing up my display. I've tried using:

viewPortWidth = window.innerWidth;
viewPortHeight = window.innerHeight;

and

 viewPortWidth = document.documentElement.clientWidth;
 viewPortHeight = document.documentElement.clientHeight;

But they do not seem to be working.

Does anyone have any ideas? Any help is much appreciated!

Thanks!

Solution

  • Everything is fine just concatenate the viewPortWidth and viewPortHeight with "px", like this,

    viewPortWidth = window.innerWidth + "px";
viewPortHeight = window.innerHeight + "px";

    I think this will work just fine, try it.