JavaScript 计算视口宽度/高度

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

Answer 1

Based on this site you can write following function in javascript to calculate your desired values:

 function vh(v) { var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); return (v * h) / 100; } function vw(v) { var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); return (v * w) / 100; } function vmin(v) { return Math.min(vh(v), vw(v)); } function vmax(v) { return Math.max(vh(v), vw(v)); } 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 codes!

Answer 2

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/

Answer 3

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)

Answer 4

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;
    }
}

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

get vmin in px

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