代码之家 › 专栏 › 技术社区 › Mike Pala

检测浏览器窗口是否最大化以及默认(100%)缩放

device-width zooming maximize window javascript

-3

Mike Pala · 技术社区 · 8 年前

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

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

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

2 回复 | 直到 8 年前

1

10

Samuel Liew cicero lopes 8 年前

检测是否处于最大宽度:

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

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;

N、你不能使用 window.devicePixelRatio 为了检测这一点,高DPI(例如视网膜)显示器将具有不同的基值。

联合检查:

var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;

截至2018年3月6日,在Chrome 64上进行测试和工作

2

1

Collin 5 年前

我注意到,如果我单击并将整个窗口拖到屏幕顶部,使其捕捉/最大化屏幕。可用高度和窗口。外光是相等的,所以我想我可以用它来检查高度最大化。

但是,如果我只将窗口的顶部向上拖动到顶部,使其捕捉到最大值,则这些值中存在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
}