检测浏览器 window 是否最大化且默认 (100%) 缩放
Detect if browser window is maximized and at default (100%) zoom
我知道这听起来很奇怪,但确实是有原因的,而且这符合用户的最大利益。我知道让浏览器自动最大化并设置为 100% 可能会有问题,但是如果 window 没有最大化并且缩放不是 100% 那么所有用户会看到一条消息 "please max your window and set the zoom to 100%".我需要在 Chrome、Firefox 和 IE 中完成这项工作……至少。
我不是要让它 "full screen mode" 只是最大化 window。
如果 "forcing" 在 "keeping" 100% 和最大 window 的意义上是有问题的,如何将缩放设置为 100% 并在初始加载时最大化 window ?
检测是否达到最大宽度:
您可能需要检查文档的宽度是否小于屏幕宽度:
var isAtMaxWidth = screen.availWidth - window.innerWidth === 0;
然而,您不能使用高度来执行此操作,因为浏览器已为选项卡和工具栏保留垂直 space,并且无法获取它们的高度。
检测浏览器缩放:
基于this answer by user800583,这里是一个简化版本:
var screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
var isAtDefaultZoom = screenPixelRatio > 0.92 && screenPixelRatio <= 1.10;
N.B.: 您不能使用 window.devicePixelRatio
来检测这一点,因为 high-DPI(例如:视网膜)显示器将具有不同的基值。
联合检查:
var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;
截至 2018 年 3 月 6 日已测试并使用 Chrome 64
我注意到如果我点击并拖动我的整个 window 到屏幕顶部使其对齐/最大化,screen.availHeight 和 window.outerHeight 是相等的,所以我想我可以单独使用它来检查高度最大化。
但是,如果我只将 window 的顶部拖到顶部使其对齐到最大值,则这些值 7 会有所不同。
为了解决将 window 的提示拖到屏幕顶部的特殊情况,我添加了一个条件。如果 差值 大于 30,我会进行条件检查以判断绝对值是否 等于 与数字 7,但我不要认为这些比例在每个人的设置上都是平等的。第二次检查高度是针对在页面底部打开开发者工具之类的情况。
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
}
我知道这听起来很奇怪,但确实是有原因的,而且这符合用户的最大利益。我知道让浏览器自动最大化并设置为 100% 可能会有问题,但是如果 window 没有最大化并且缩放不是 100% 那么所有用户会看到一条消息 "please max your window and set the zoom to 100%".我需要在 Chrome、Firefox 和 IE 中完成这项工作……至少。
我不是要让它 "full screen mode" 只是最大化 window。
如果 "forcing" 在 "keeping" 100% 和最大 window 的意义上是有问题的,如何将缩放设置为 100% 并在初始加载时最大化 window ?
检测是否达到最大宽度:
您可能需要检查文档的宽度是否小于屏幕宽度:
var isAtMaxWidth = screen.availWidth - window.innerWidth === 0;
然而,您不能使用高度来执行此操作,因为浏览器已为选项卡和工具栏保留垂直 space,并且无法获取它们的高度。
检测浏览器缩放:
基于this answer by user800583,这里是一个简化版本:
var screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
var isAtDefaultZoom = screenPixelRatio > 0.92 && screenPixelRatio <= 1.10;
N.B.: 您不能使用 window.devicePixelRatio
来检测这一点,因为 high-DPI(例如:视网膜)显示器将具有不同的基值。
联合检查:
var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;
截至 2018 年 3 月 6 日已测试并使用 Chrome 64
我注意到如果我点击并拖动我的整个 window 到屏幕顶部使其对齐/最大化,screen.availHeight 和 window.outerHeight 是相等的,所以我想我可以单独使用它来检查高度最大化。
但是,如果我只将 window 的顶部拖到顶部使其对齐到最大值,则这些值 7 会有所不同。
为了解决将 window 的提示拖到屏幕顶部的特殊情况,我添加了一个条件。如果 差值 大于 30,我会进行条件检查以判断绝对值是否 等于 与数字 7,但我不要认为这些比例在每个人的设置上都是平等的。第二次检查高度是针对在页面底部打开开发者工具之类的情况。
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
}