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

【问题标题】：Detect if browser window is maximized and at default (100%) zoom检测浏览器窗口是否最大化并默认（100％）缩放
【发布时间】：2018-02-27 07:25:39
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript window maximize zooming device-width

【解决方案1】：

检测是否在最大宽度：

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

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

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

检测浏览器缩放：

基于this answer by 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 上测试并运行

【讨论】：

这可行，但是它无法检测浏览器是否处于最大高度，这是确定浏览器是否最大化所必需的。例如，如果您将浏览器的大小调整为与设备宽度完全相同（如果您将其移出视图即可），它将错误地报告浏览器已最大化，而高度可以是任何值，甚至是 0。

【解决方案2】：

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

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

为了解决将窗口提示拖到屏幕顶部的特殊情况，我添加了一个条件。我会对绝对值是否 equal 与数字 7 进行条件检查，而不是 difference 是否大于 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
}

【讨论】：