Using JavaScript to calculate dimensions based on the viewport's width and height

Question

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code:

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

So far, this solution has been working effectively. However, I noticed that the values -40 and -100 do not adjust according to the viewport scaling height and width.

When attempting to update the code as follows:

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

To ensure responsiveness and relative positioning within the viewport, using vw and vh units, the JavaScript stops functioning correctly. It seems that vw and vh units are only applicable in CSS. Is there a way to achieve this functionality purely in JavaScript?

Please refrain from suggesting JQuery solutions, as I am looking for a JavaScript-only approach!

Thank you

javascript css viewport

Answer 1

Answer №1

After researching on this website, I found a useful set of functions that can calculate values based on a percentage of the 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));

Incorporating the solution from this post enhanced my code!

Answer 2

After researching on this website, I found a useful set of functions that can calculate values based on a percentage of the 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));

Incorporating the solution from this post enhanced my code!

Answer 3

Answer №2

Here is a suggestion for you:

function determineViewportSize() {

 var viewportWidth;
 var viewportHeight;

 // For modern browsers (Mozilla, Netscape, Opera, IE7)
 if (typeof window.innerWidth !== 'undefined') {
   viewportWidth = window.innerWidth,
   viewportHeight = window.innerHeight
 }

// For IE6 in standards compliant mode
 else if (typeof document.documentElement !== 'undefined'
 && typeof document.documentElement.clientWidth !== 'undefined' 
 && document.documentElement.clientWidth !== 0) {
    viewportWidth = document.documentElement.clientWidth,
    viewportHeight = document.documentElement.clientHeight
 }

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

For more information, visit:

Answer 4

Here is a suggestion for you:

function determineViewportSize() {

 var viewportWidth;
 var viewportHeight;

 // For modern browsers (Mozilla, Netscape, Opera, IE7)
 if (typeof window.innerWidth !== 'undefined') {
   viewportWidth = window.innerWidth,
   viewportHeight = window.innerHeight
 }

// For IE6 in standards compliant mode
 else if (typeof document.documentElement !== 'undefined'
 && typeof document.documentElement.clientWidth !== 'undefined' 
 && document.documentElement.clientWidth !== 0) {
    viewportWidth = document.documentElement.clientWidth,
    viewportHeight = document.documentElement.clientHeight
 }

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

For more information, visit:

Answer 5

Answer №3

One issue encountered is that JS lacks support for 40vh. To remedy this, the number of pixels equivalent to 40vh must be calculated initially before using it. Otherwise, an error will occur when attempting 1000 - 40vh.

The term 40vh signifies 40 % of viewport height. Therefore, window.innerHeight * 0.4 == 40vh

It should be noted that wh does not exist in JavaScript; only vh (which represents a percentage of the viewport height).

Answer 6

One issue encountered is that JS lacks support for 40vh. To remedy this, the number of pixels equivalent to 40vh must be calculated initially before using it. Otherwise, an error will occur when attempting 1000 - 40vh.

The term 40vh signifies 40 % of viewport height. Therefore, window.innerHeight * 0.4 == 40vh

It should be noted that wh does not exist in JavaScript; only vh (which represents a percentage of the viewport height).

Answer 7

Answer №4

To achieve this task easily, when you have complete editing access to the page, you can create a CSS class with dimensions set to -40vw and -100vh like shown below:

CSS:

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

JS:

element.classList.add("custom");

Please note that "classList" is not compatible with Internet Explorer 9. To ensure cross-browser compatibility, use the following JavaScript code instead:

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

Answer 8

To achieve this task easily, when you have complete editing access to the page, you can create a CSS class with dimensions set to -40vw and -100vh like shown below:

CSS:

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

JS:

element.classList.add("custom");

Please note that "classList" is not compatible with Internet Explorer 9. To ensure cross-browser compatibility, use the following JavaScript code instead:

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

Answer 9

Answer №5

Maybe all you have to do is enclose it in quotation marks.

var width = window.innerWidth = "40vw"
var width = window.innerWidth = "40vw"

Answer 10

Maybe all you have to do is enclose it in quotation marks.

var width = window.innerWidth = "40vw"
var width = window.innerWidth = "40vw"

Answer 11

Answer №6

Here is a solution using CSS:

// calculate 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 can you incorporate this into your CSS?

If you plan to use 100vh or 100vw with this approach, make sure to set a fallback for incompatible browsers.

For instance;

.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.. */

Answer 12

Here is a solution using CSS:

// calculate 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 can you incorporate this into your CSS?

If you plan to use 100vh or 100vw with this approach, make sure to set a fallback for incompatible browsers.

For instance;

.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.. */

Answer 13

Answer №7

If you're dealing with a webpage that constantly fits perfectly within the viewport, this method may be a simpler alternative to more universal solutions. This is especially handy when the body of the page never needs to be scrolled and always matches the width and height of the window.

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

With just one line of code, the vh variable is set to the pixel value of the document body, streamlining your implementation.

This technique is particularly useful in game development and similar scenarios where the body remains fixed within the viewport.

Answer 14

If you're dealing with a webpage that constantly fits perfectly within the viewport, this method may be a simpler alternative to more universal solutions. This is especially handy when the body of the page never needs to be scrolled and always matches the width and height of the window.

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

With just one line of code, the vh variable is set to the pixel value of the document body, streamlining your implementation.

This technique is particularly useful in game development and similar scenarios where the body remains fixed within the viewport.

Answer 15

Answer №8

retrieve the value of vmin in pixels

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

Answer 16

retrieve the value of vmin in pixels

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

Using JavaScript to calculate dimensions based on the viewport's width and height

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Invoking a nested function within an array

Place the two buttons in position

Django form submission triggers Jquery modal to confirm object deletion

What is the method to establish a reference based on a value in programming?

Tips for repairing a horizontal line at the bottom of the <TD> tag and placing text on top

The proper usage of middleware in vue-router

By default, Nuxt 2.15.7 is automatically installed when you create a new Nuxt app

Reorganizing objects upon insertion in Mongo DB

Changing return values with Jest mocks in TypeScript

What's the best way to target an input that's appearing as it slides in from the edge of the screen?

What is the process for retrieving data from a javascript file that was submitted through a form?

Changing the background color of a page to match the background color of a button in React, which can be updated at any time

The comparison between exposing and creating objects in a Nodejs router file

What's the best way to align a bottom navigation bar in the center?

Guide on Implementing Link href in Next.js v12

How to send parameters to the jquery .css() method

I'm noticing multiple repeated entries appearing when I try to set the cookie - what could be causing

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

The mat-table's data source is failing to refresh and display the latest

Unable to produce audio from files