javascript - Detect if browser window is maximized and at default (100%) zoom - Stack Overflow

admin管理员组

文章数量:1344188

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.

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?

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.

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?

• javascript
• window
• maximize
• zooming
• device-width

Share Improve this question Follow edited Mar 6, 2018 at 0:13 Samuel Liew 79.2k111111 gold badges169169 silver badges304304 bronze badges asked Feb 27, 2018 at 7:25 Mike PalaMike Pala 80611 gold badge1616 silver badges4242 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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.

Detect browser zoom:

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;

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

Combined check:

var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;

---

Tested and working on Chrome 64 as of 06 Mar 2018

I noticed that if I click and drag my entire window to the top of the screen so it snaps / maximizes, the screen.availHeight and window.outerHeight are equal, so I thought I could use this by itself to check for height maximization.

However, if I only drag the top of the window up to the top so it snaps to max, there is a difference in these values of 7.

To account for the special case of dragging a window's tip to the top of the screen, I added a conditional. I would have made this conditional check for whether the absolute value is equal to the number 7 instead of if the difference is greater than 30, but I don't think these proportions would be equal on everyone's setups. The second check for height is for cases when things like developer tools are opened at the bottom of the page.

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
}

本文标签： javascriptDetect if browser window is maximized and at default (100) zoomStack Overflow