javascript - 检测浏览器窗口是否最大化并默认（100％）缩放

Question

我知道这听起来很奇怪，但确实是有原因的，这符合用户的最大利益。我知道让浏览器自动最大化并设置为 100% 可能会出现问题，但是如果窗口未最大化且缩放不是 100%，所有用户将看到一条消息“请最大化您的窗口并设置缩放到 100%”。我需要在 Chrome、Firefox 和 IE 中完成这项工作……至少。

我不想让它成为“全屏模式”，只是最大化窗口。

如果“强制”在“保持”100% 和最大窗口的意义上是有问题的，那么如何将缩放设置为 100% 并在初始加载时最大化窗口？

Answer 1

检测是否在最大宽度：

您可能需要检查文档的宽度是否小于屏幕宽度：

var isAtMaxWidth = screen.availWidth - window.innerWidth === 0;

但是，您不能使用高度来执行此操作，因为浏览器为选项卡和工具栏保留了垂直空间，并且无法获取它们的高度。

检测浏览器缩放：

根据user800583 的这个回答，这里有一个缩短的版本：

var screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
var isAtDefaultZoom = screenPixelRatio > 0.92 && screenPixelRatio <= 1.10;

注意：您不能使用它window.devicePixelRatio来检测这一点，因为高 DPI（例如：视网膜）显示器将具有不同的基本值。

综合检查：

var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;

---

截至 2018 年 3 月 6 日，已在 Chrome 64 上测试并运行

Answer 2

我注意到，如果我单击并将整个窗口拖动到屏幕顶部以使其对齐/最大化，则 screen.availHeight 和 window.outerHeight 是相等的，所以我想我可以单独使用它来检查高度最大化。

但是，如果我只将窗口的顶部拖到顶部以使其捕捉到最大值，则这些值会有所不同 7。

为了解决将窗口提示拖到屏幕顶部的特殊情况，我添加了一个条件。我会做这个有条件的检查绝对值是否等于数字 7 而不是差异是否大于 30，但我不认为这些比例在每个人的设置上都是相等的。第二次检查高度是针对在页面底部打开开发人员工具等内容的情况。

let isWindowWidthMaximized = screen.availWidth - window.innerWidth === 0;
let isWindowHeightMaximized = false
if(Math.abs(screen.availHeight - window.outerHeight) <= 30 && window.innerHeight/((window.innerHeight + window.outerHeight)/2) >.8) {
    isWindowHeightMaximized = true
} else {
    isWindowHeightMaximized = false
}