JavaScript calculate with viewport width/height

Question

I am trying to set a responsive point in my mobile Webview and did this:

var w = window.innerWidth-40;
var h = window.innerHeight-100;

This works great so far. But the values -40 and -100 are not in the viewport scaling height and width.

When I do this:

var w = window.innerWidth-40vw;
var h = window.innerHeight-100vh;

as it should be to stay responsive and relative to the viewport - the JS does not work anymore. I think vh and vw works only in CSS ? How can I achieve this in JS ?

Pleas no JQuery solutions - only JS!

Thanks

score 49 · Accepted Answer · edited Dec 27 '22 at 05:15

49

Based on this site you can use the following util functions to calculate your desired values as a function of a percent of screen width or height:

function vh(percent) {
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  return (percent * h) / 100;
}

function vw(percent) {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  return (percent * w) / 100;
}

function vmin(percent) {
  return Math.min(vh(percent), vw(percent));
}

function vmax(percent) {
  return Math.max(vh(percent), vw(percent));
}

console.info(vh(20), Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
console.info(vw(30), Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
console.info(vmin(20));
console.info(vmax(20));

I used this incredible question in my code!

edited Dec 27 '22 at 05:15

starball

20,030
7
43
238

answered May 22 '17 at 09:35

Yashar Aliabbasi

2,663
1
23
35

This is awesome - thank you very much - I accept this nice solution – Tobias Alt May 22 '17 at 09:39
1

what is v argument that all function takes in? – DeadDjangoDjoker Apr 24 '19 at 06:18
The value that you want to convert into `vh` or `vw` – Yashar Aliabbasi Apr 24 '19 at 06:46
Careful! The vmin and vmax functions here don't work for negative numbers – Angry Dan Aug 18 '20 at 08:52

score 5 · Answer 2 · edited Oct 10 '17 at 02:12

Try this:

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

Reference: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

No issues. I just posted it so that you could choose between single function call and multiple calls according to your needs. Then again it always helps me to look up different answers. — Arun V K, May 22 '17 at 09:51

score 2 · Answer 3 · answered May 22 '17 at 09:33

2

Problem is that JS does not have 40vh, calculate how much pixels is 40vh first to use it. It will throw error when doing 1000 - 40vh

40vh means 40 % of viewport height. So window.innerHeight * 0.4 == 40vh

Also there is no such thing as wh, only vh (% of viewport height)

answered May 22 '17 at 09:33

Justinas

41,402
5
66
96

Should I calculate the pixels? This could work I guess. – Tobias Alt May 22 '17 at 09:35
1

@TobiasAlt Yes, it would work, just calculate everything in integers/floats – Justinas May 22 '17 at 09:36
Your answer would be acceptable of course but above is a complete solution - I have to accept this one. But thank you I vote you up anyway. – Tobias Alt May 22 '17 at 09:40

score 0 · Answer 4 · answered May 25 '18 at 01:53

The simplest way to do this, if you can fully edit the page, is to make a css class that has -40vw and -100vh like so:

CSS:

.class{
    width: -40vw;
    height: -100vh;
}

JS:

element.classList.add("class");

Note: "classList" is not supported in Internet Explorer 9. If you want it to work in all browsers, use this for JS instead:

function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}

score 0 · Answer 5 · answered Apr 08 '19 at 23:22

0

you just need to surround it in quotes I think. var w = window.innerWidth = "40vw" var w = window.innerWidth = "40vw"

answered Apr 08 '19 at 23:22

score 0 · Answer 6 · answered Nov 16 '19 at 17:56

this is my solve with you can use CSS;

    // calc dynamic customer device height/width
    let vh = window.innerHeight * 0.01,
        vw = window.innerWidth * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
    document.documentElement.style.setProperty('--vw', `${vw}px`);

How to use in CSS ?

If you will use 100vh or 100vw with this method, you should set 100vh/100vw for uncompatible browser.

Examples;

.wrapper{
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.slide-container{
    height: calc(var(--vh, 1vh) * 100 - var(--menuHeight) - var(--footerHeight));
}

.little-image{
    width: calc(var(--vw, 1vw) * 5);
    margin-bottom: calc(var(--vh, 1vh) * 1);
}

/* and more.. */

score 0 · Answer 7 · answered Apr 13 '22 at 15:37

This isn't a universal solution, but it's a much simpler implementation if you're working with a page that is always 100% displayed within the viewport (ie, if the body doesn't have to be scrolled and always matches the window width and height).

let vh = document.body.getBoundingClientRect().height;

This sets the vh variable to the pixel value of the document body with just one line of code.

Useful for game dev and other scenarios where you have the body affixed to the viewport.

score 0 · Answer 8 · answered Jul 19 '22 at 15:29

0

get vmin in px

function vmin(){
    return window.innerHeight < window.innerWidth ? window.innerHeight: window.innerWidth;
}

answered Jul 19 '22 at 15:29

Weilory

2,621
19
35

JavaScript calculate with viewport width/height

8 Answers8

Linked