javascript - 如何在调整大小时显示用户的显示器分辨率?

标签 javascript html screen-resolution screen-size

我想知道是否有一种方法可以显示在用户调整屏幕大小时更新的用户屏幕信息。我见过只显示用户屏幕但不实时更新的 javascript。有人知道这个脚本吗?谢谢!

最佳答案

两个想法:

  1. window 上的 resize 事件,但我怀疑浏览器不会在屏幕尺寸更改时触发(不过可能会触发,我想)。如果不是这样,用户可能会在调整屏幕大小后调整窗口大小...... 至少,当屏幕分辨率发生变化但浏览器窗口大小时,Chrome 不会触发 resize没有。有时更改屏幕分辨率会产生更改浏览器大小的链式 react (例如,如果它需要更小,或者如果它以某种方式停靠),但通常不会。

  2. 如果浏览器不能可靠地触发 resize(我怀疑它们不会),您将不得不轮询并检查 screen 对象以看看大小是否改变了。不理想,但每秒轮询一次左右不会有太多开销。

这是一个使用这两种方法的示例,加上 window.onfocus as GitaarLAB建议:Live Copy

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<script>
  (function() {
    "use strict";
    var lastSize;

    window.onfocus = window.onresize = checkSize;

    setInterval(checkSize, 1000);

    function checkSize() {
      if (!lastSize || (lastSize.width !== screen.width || lastSize.height !== screen.height)) {
        lastSize = {
          width: screen.width,
          height: screen.height
        };
        display("Screen size is (now) " + lastSize.width + "x" + lastSize.height);
      }
    }

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

当然,只有当窗口 调整大小和窗口焦点的通知不够时,您才需要轮询。

关于javascript - 如何在调整大小时显示用户的显示器分辨率?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25350742/

相关文章:

javascript - 如何更改转换 :translate css rule according to the screen resolution?

javascript - 具有 2 个屏幕的属性 screen.width (IE)

Javascript:如何将 Javascript 图像链接到页面?

javascript - 将所有 div 的大小调整为最高 div 的大小

javascript - 对于循环调用 HTTPS 地理编码 api 并将结果输入坐标到 SQL 数据库,如何让 Node 的 HTTPS 模块工作?

html - 需要有关查找 div 内容的好方法的建议

javascript - 如何从多个嵌套函数中丢弃分隔的延续?

javascript - onload() 在 javascript 中使用的区别

html - Bootstrap - 形式水平对齐

javascript - 为不同的网络屏幕尺寸加载不同的图像