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

Posted 2021-04-10

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

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

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

答案

Detect if at max width:

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

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

但是，由于浏览器为标签和工具栏保留了垂直空间，因此无法获得高度。

Detect browser zoom:

基于this answer by user800583，这是一个缩短版本：

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

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

Combined check:

var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;

---

自2018年3月6日起测试并使用Chrome 64