JavaScript 计算视口宽度/高度

Posted 2023-03-06

【中文标题】JavaScript 计算视口宽度/高度

【英文标题】：JavaScript calculate with viewport width/height

【发布时间】：2017-10-21 21:38:29

【问题描述】：

我正在尝试在我的移动 Webview 中设置一个响应点并这样做：

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

到目前为止效果很好。但值 -40 和 -100 不在视口缩放高度和宽度中。

当我这样做时：

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

因为它应该保持响应并相对于视口 - JS 不再工作了。 我认为 vh 和 vw 仅在 CSS 中有效？ 如何在 JS 中实现这一点？

请不要使用 JQuery 解决方案 - 只有 JS！

谢谢

【参考方案1】：

问题是JS没有40vh，先计算40vh有多少像素才用。做1000 - 40vh时会报错

40vh 表示40 % of viewport height。所以window.innerHeight * 0.4 == 40vh

也没有wh这样的东西，只有vh（视口高度的百分比）

【讨论】：

我应该计算像素吗？我猜这可能会奏效。

@TobiasAlt 是的，它会工作，只需计算整数/浮点数中的所有内容

您的回答当然是可以接受的，但以上是一个完整的解决方案——我必须接受这个。但是谢谢你，我还是投票给你。

【参考方案2】：

基于this site，您可以在javascript 中编写以下函数来计算您想要的值：

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

我在我的代码中使用了this 不可思议的问题！

【讨论】：

这太棒了 - 非常感谢 - 我接受这个不错的解决方案

所有函数接受的 v 参数是什么？

要转换成vh或vw的值

小心！这里的 vmin 和 vmax 函数不适用于负数

【参考方案3】：

试试这个：

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/

【讨论】：

谢谢 - Yashar 确实更快地解决了问题。对不起，伙计。

没有问题。我刚刚发布了它，以便您可以根据需要在单个函数调用和多个调用之间进行选择。再说一遍，它总能帮助我查找不同的答案。

【参考方案4】：

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

CSS：

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

JS：

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;
    

【参考方案5】：

你只需要用我认为的引号括起来。 var w = window.innerWidth = "40vw" var w = window.innerWidth = "40vw"

【参考方案6】：

这是我的解决方案，你可以使用 CSS；

    // calc dynamic customer device height/width
    let vh = window.innerHeight * 0.01,
        vw = window.innerWidth * 0.01;
    document.documentElement.style.setProperty('--vh', `$vhpx`);
    document.documentElement.style.setProperty('--vw', `$vwpx`);

如何在 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.. */