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

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

问题描述:

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

I know it sounds weird but there really is a reason and it is in the users' best interest. I know that having the browser automatically maximize and set 100% might be problematic but how about making so that if the window is not maximized and the zoom is not 100% all the users would see is a message "please max your window and set the zoom to 100%". I need to make this work in Chrome, Firefox and IE ...at least.

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

I am not trying to make it "full screen mode" just maximize the window.

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

If "forcing" in the sense "keeping" 100% and max window is problematic how about just setting the zoom to 100% and maximizing the window on initial load?

检测是否在最大宽度:



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

Detect if at max width:

You'll probably want to check if the document's width is lesser than the screen width:

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

然而,由于浏览器为标签和工具栏保留了垂直空间,因此无法使用高度执行此操作,并且没有办法获得那些高度。

You can't do this with height however, as the browser has reserved vertical space for tabs and toolbars, and there is no way of getting the height of those.

基于 user800583的回答,这是一个缩短的版本:

Based on this answer by user800583, here's a shortened version:

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

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

N.B.: You can't use window.devicePixelRatio to detect this, as high-DPI (e.g.: retina) displays will have different base values.

var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;






测试并使用Chrome 64作为2018年3月6日