Fullscreen API not working if triggered with F11

Question

I implemented a fullscreen toggling feature for my application and it is actually working fine, tested on newest Chrome, Firefox, IE and Opera. I have one method for activating

Answer 1

You can use the display-mode: fullscreen media query which properly captures both Fullscreen API changes and F11.

CSS version:

#fullscreen::before {
    content: 'not ';
}

@media (display-mode: fullscreen) {
    #fullscreen::before {
        content: none;
    }
}

fullscreen

JavaScript version:

const el = document.getElementById('fullscreen')

const query = matchMedia('(display-mode: fullscreen)')
const handler = e => {
    el.innerHTML = (e.matches ? '' : 'not ') + 'fullscreen'
}

handler(query)
query.addListener(handler)