Detect fullscreen mode

Question

Modern desktop version of IE 10 is always fullscreen.

There is a living specification for :fullscreen pseudo-class on W3

But when I tried to det

Answer 1

As CSS is reliable in detecting the fullscreen, you can use something like this:

#detector {
    position: fixed;
    visibily: hidden;
    top: 0;
    left: 0;
}

@media all and (display-mode: fullscreen) {
    #detector {
        top: 1px;
    }
}

Then you set an interval in javascript to check the element's position. document.getElementById('detector').getBoundingClientRect().top > 0

You can maintain the fullscreen status in a variable or state if you are on react.