即使在调整大小时如何显示用户的显示器分辨率？答案

【问题标题】：How to display user's monitor resolution even on resize?即使在调整大小时如何显示用户的显示器分辨率？
【发布时间】：2014-08-17 15:38:30
【问题描述】：

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

【问题讨论】：

所以，您只是希望您的更新代码（呈现“屏幕信息块”的代码）也与window.onresize 挂钩？
即使调整大小，用户显示器的分辨率也不会改变。

标签： javascript html screen-resolution screen-size

【解决方案1】：

两个想法：

resize 上的 window 事件，但我怀疑浏览器不会在屏幕尺寸更改时触发（不过我想可能会触发）。如果不是这样，用户可能会在调整屏幕大小后调整窗口大小... Chrome 至少不会在屏幕分辨率发生变化但浏览器窗口大小不变时触发 resize。有时更改屏幕分辨率会产生更改浏览器大小的连锁反应（例如，如果需要更小，或者以某种方式停靠），但通常不会。
如果浏览器不能可靠地触发resize（我怀疑它们不会），您必须轮询并检查screen 对象以查看大小是否发生了变化。不理想，但每秒轮询一次左右不会有太多开销。

这是一个使用这两种方法的示例，加上window.onfocus 作为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>

当然，只有在 window 上的通知调整大小和窗口焦点不足时才需要轮询。

【讨论】：

+1 css-trick 是一种有趣的技术。为什么您怀疑某些浏览器不会触发调整大小（不要将其与 load 或 focus 混淆）？
@GitaarLAB：因为更改屏幕分辨率通常不会调整浏览器窗口的大小。由于浏览器窗口大小没有改变，我不知道浏览器会触发resize。不过，正如我所说，用户可能会在屏幕调整大小后重新调整大小......
成交，我完全明白。那么.. 将onfocus 添加到组合中怎么样？我假设用户必须不关注浏览器才能更改分辨率，然后将注意力重新集中到浏览器上继续浏览？我在看window.screen.availHeight and window.screen.availWidth
@T.J.Crowder 使用screen 对象不是更好吗？
谢谢！我会保存这个！

【解决方案2】：

将函数绑定到window.onresize 怎么样？

window.onresize = function (e) {
  console.log("Dimensions: " + e.target.outerWidth + "x" + e.target.outerHeight);
};

【讨论】：

IE 的window.event 怎么样？以及跨浏览器支持？
我认为（虽然目前正在寻找确认）onresize 是跨浏览器兼容的。如果没有，你最好的选择是window.addEventListener('resize', fn);
onresize 可以在任何浏览器上运行（并清除之前附加的任何处理程序），是的。但是resize 不会在屏幕大小发生变化但浏览器窗口大小不变时触发（至少在 Chrome 中不会）。
对。可能在不考虑“外力”的情况下跳到一个简单的解决方案。