-3

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?

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Mike Pala
  • 766
  • 1
  • 11
  • 39

2 Answers2

10

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

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
  • 1
    This works, however it fails to detect if the browser is at max HEIGHT, which is required to determine if the browser is maximized. For example, if you resize a browser to be exactly the device width (can be done if you move it out of view), it will erroneously report the browser to be maximized, whereas the height can be of any value, even 0. – Ivan Nov 10 '19 at 20:37
1

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.

enter image description here

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.

enter image description here

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
}
Collin
  • 394
  • 5
  • 14