JavaScript – Calculate with Viewport Width and Height

cssjavascriptviewport

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

Best Answer

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!

Related Question