Question

我有一台1920x1080的显示器。我的Windows GUI缩放比例为125％。这意味着要使网站看起来像正常的100％缩放比例，我需要将Chrome缩放到80％（80％* 125％= 1）。（因此，在这种情况下，devicePixelRatio为1。）

我想获得浏览器窗口的最大大小（以像素为单位），也就是最大化后的大小。

人们会认为let adj = (window.screen.width == window.outerWidth) ? 0 : -15 let maxScreenWidth = document.body.getBoundingClientRect().width * (window.screen.width / (window.outerWidth + adj))会做到这一点，但是在Chrome浏览器中，我得到的是1536，而不是1920。（1536是1920 / 1.25）

我提出了三种解决方案：一种用于Chrome浏览器，一种用于Edge，另一种用于Firefox。我现在要弄清楚的唯一一件事是如何将解决方案同步到一个：

Chrome浏览器：

// Edit: simply "window.screen.width" also works here.
let adj = (window.screen.width == window.outerWidth) ? 0 : -18
let maxScreenWidth = document.body.getBoundingClientRect().width * (window.screen.width / (window.outerWidth + adj))

边缘：

let maxScreenWidth = window.screen.width

Firefox：（！）

<div id="box1" style="position: absolute;">First Box</div>

Answer 1

如果您的解决方案适用于您提到的每种浏览器，则可以尝试从用户代理字符串中检测到该浏览器，然后在该条件下应用正确的技术。当然，用户可以更改其用户代理字符串，但这可能对您有用。

let isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
let isEdge = !isIE && !!window.StyleMedia;
let isFirefox = typeof InstallTrigger !== "undefined";
let isIE = /*@cc_on!@*/false || !!document.documentMode;
let isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

if (isChrome) {
    let adj = (window.screen.width == window.outerWidth) ? 0 : -15;
    let maxScreenWidth = document.body.getBoundingClientRect().width * (window.screen.width / (window.outerWidth + adj));
} else if (isIE || isEdge) {
    let adj = (window.screen.width == window.outerWidth) ? 0 : -18
    let maxScreenWidth = document.body.getBoundingClientRect().width * (window.screen.width / (window.outerWidth + adj));
} else if (isFirefox) {
    let maxScreenWidth = window.screen.width;
} else {
    // Some default
}

或者将其包装到一个可以调用的函数中，然后从中返回maxScreenWidth。

Answer 2

好的，这是我的解决方案。等待错误报告响应，但与此同时：

var adj = (window.screen.width == window.outerWidth) ? 0 : -15
var maxScreenWidth = window.innerWidth * (window.screen.width / (window.outerWidth + adj))
if (parseInt(maxScreenWidth) != maxScreenWidth) maxScreenWidth = window.screen.width

获取Javascript中浏览器的最大像素宽度

2 个答案: