如何动态获取浏览器的高度和宽度？

Question

如何动态获取浏览器的高度和宽度？

javascriptjqueryhtml

3

我想创建一个聊天框，而不依赖媒体查询，使用数学方法来设置聊天框内容的大小。

我正在尝试使用$(window).height()/$(window).width()，但它不能覆盖整个浏览器窗口。我希望能够在javascript/jquery中完成所有操作，而不需要使用css或媒体查询。

- mICHAEL

请发布代码，这样我们才能更好地帮助您。 - Ivan86

5个回答

0

我遇到了一个类似的问题，涉及到在移动设备上需要点击事件处理程序，而在桌面上需要悬停事件处理程序的导航栏。最终，我找到了JS媒体查询函数matchMedia()，它与setTimeout()很好地配合使用，因此它不会在每个像素更改时运行。

我的解决方案可以在这里找到：https://stackoverflow.com/a/60837961/7353382

- Dani Amsalem

0

如果$(window).height()没有返回整个浏览器窗口大小，那么你可能有结构问题，比如<!DOCTYPE html>可能不是你的HTML文件的第一行等。

- Ivan86

0

window.innerWidth和window.innerHeight将在原生JavaScript中给出此答案，而无需任何库。

如果您想获取特定HTML元素的尺寸，则可以使用offsetWidth和offsetHeight，例如document.body.offsetWidth

没有看到您的代码，不太确定您正在做什么，但是当您像上面那样将高度除以宽度时，您只会得到一个比率，这可能是您没有看到预期结果的原因？

- David Calhoun

0

如果您想在JavaScript中动态设置浏览器屏幕的最大宽度或最小宽度，就像媒体查询一样，并定义样式或其他内容，您可以使用Window接口的matchMedia()方法。它将返回一个新的MediaQueryList对象，然后可以用来确定文档是否与媒体查询字符串匹配，以及监视文档以检测它何时匹配（或停止匹配）该媒体查询。

好的，语法如下：

const pageWidth = window.matchMedia('(min-width: 600px)');

我们可以以不同的方式使用返回的对象：

     const handlePageColor = () => {
    if (pageWidth.matches) {
        document.body.style.backgroundColor = "yellow";
    }
};

最后，您应该向我们的对象添加addListener()方法，这会导致我们的函数在浏览器屏幕大小更改时运行。

    pageWidth.addListener(handlePageColor);

- Mehdi Salimi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Momin · Accepted Answer

尝试使用这段代码片段。

(function() {
  window.onresize = displayWindowSize;
  window.onload = displayWindowSize;

  function displayWindowSize() {
    let myWidth = window.innerWidth;
    let myHeight = window.innerHeight;
    // your size calculation code here
    document.getElementById("screen").innerHTML = myWidth + "x" + myHeight;
  };


})();

<div id="screen"></div>