How I Distinguish Between Maximized and Fullscreen Mode (Using CSS + JS)

manian99

I ran into the common issue where it's hard to distinguish between a maximized window and fullscreen mode (via F11) in Vivaldi—since both often have the same window.outerHeight and screen.height.

So I came up with this workaround:

#browser.maximized #webview-container {height: calc(100% - 1px) !important;}

This makes the content area 1px shorter when in maximized mode, giving me a reliable difference I can detect in JavaScript.
In my userscript, I compare dimensions like window.innerHeight, window.outerHeight, and screen.height, and also track F11 key presses.

If innerHeight is 1px shorter, I assume maximized. If the dimensions match the screen size (but not the maximized signature), I assume it's fullscreen.
Then I dynamically add a class (fullscreen or winmax) to the <body> so I can style accordingly with Stylus or injected CSS.

I know there might be a smarter or more elegant way to handle this—what do you think?

oudstand

@manian99 you could also check if #browser has the class fullscreen for the fullscreen mode toggled by F11. If #browser has the class maximized it's maximized and if it has normal then it's in windowed mod. #browser only has one of them at a time.

const browser = document.querySelector('#browser');

if (browser.classList.contains('normal')) {
   // windowed
} else if (browser.classList.contains('maximized')) {
   // maximized
} else if (browser.classList.contains('fullscreen')) {
   // fullscreen
}

manian99

@oudstand Thanks for the comment. I did this because I wanted to apply the tampermonkey script separately in maximized and full screen mode on a particular site. I am sure there is a better way.

luetage

No, to let the page know you have to either change an attribute you can access, as you have done, or you need to inject something into the page when going fullscreen. This could fail when you issue fullscreen from an internal page. You would have to keep a list of tabs as workaround. The real question is why it’s necessary. A window that’s fullscreen from operating system doesn’t have UI, Vivaldi’s fullscreen mode keeps the different toolbars visible. Maximized windows don’t hide operating system bars.

tam710562

@manian99 You can try this but I'm not sure it works for all cases

window.addEventListener('resize', () => {
  if (window.matchMedia('(display-mode: fullscreen)').matches) {
    console.log('fullscreen');
  } else if (
    (window.screenX === 0)
    && (window.screenY === 0)
    && (window.outerWidth === window.screen.availWidth)
    && (window.outerHeight === window.screen.availHeight)
  ) {
    console.log('maximized');
  } else {
    console.log('normal');
  }
});