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

When attempting to retrieve the data from a JSON file using an XMLHttpRequest, the result that is returned is [object object]

Transitioning to Material-ui Version 4

Applying CSS transition delays to multiple images

How can one properly extend the Object class in JavaScript?

React fails to recognize the key prop

Add Django template without adding an extra line break

Is there a way to successfully include an apostrophe in a URL?

Having trouble retrieving data from the table with AJAX and CodeIgniter

Utilizing an Angular foreach loop for restructuring JSON data

Retrieving a targeted JSON element and adding it to a fresh object

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

Fetch a document from a NodeJS Server utilizing Express

CSS smoothly scrolls upward within a set height restriction

Toggling the visibility of a div using JavaScript

Position 2 identical classes side by side on the horizontal axis

Update the page when the React route changes

Despite implementing an event listener, the Google Maps API is failing to resize properly when created using AJAX

In order to enhance your programming skills, avoid hard coding functions and ensure that data is returned after binding changes

What is the best way to save newly added elements on a webpage that were submitted by the

The eccentricities of Angular Translate in Firefox and Safari