基于this site，您可以使用以下util函数来计算所需的值，作为屏幕宽度或高度百分比的函数：

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

我在我的代码中使用了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];
}

参考：http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

问题是JS没有40vh，先计算40vh是多少像素再使用，做1000 - 40vh会抛出错误
意思是40 % of viewport height所以window.innerHeight * 0.4 == 40vh
也没有wh这样的东西，只有vh（视口高度的%）

如果你可以完全编辑页面，最简单的方法是创建一个css类，包含-40vw和-100vh，如下所示：
CSS：

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

联森：

element.classList.add("class");

注意：Internet Explorer 9不支持"classList"。如果您希望它在所有浏览器中都能工作，请将其用于JS：

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

我想你只需要用引号把它括起来。var w = window.innerWidth = "40vw" var w = window.innerWidth = "40vw"

这是我的解决方案，你可以使用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`);

如何在CSS中使用？
如果您将使用100vh或100vw与此方法，您应该设置100vh/100vw为不兼容的浏览器。
示例;

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

这不是一个通用的解决方案，但如果您使用的页面总是100%显示在视口中（即，如果主体不必滚动，并且总是与窗口宽度和高度匹配），则这是一个简单得多的实现。

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

这只需要一行代码就可以将vh变量设置为文档主体的像素值。
对于游戏开发和其他将身体附加到视口的场景非常有用。

获取px中的vmin

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