Como saber se o site abriu em fullscreen no desktop?

[felquis]

Olá,

Estou fazendo uma página, que tem um botão de entrar em tela cheia e sair de tela cheia. Porém, o browser tem um fullscreen nativo (F11) que permite uma página já ser carregada em fullscreen, neste caso quero exibir "Sair da tela cheia".

No Firefox, encontrei este tutorial http://help.dottoro.com/ljmudibt.php que sugere usar a propriedade window.fullScreen e funciona exatamente da forma que eu preciso no Firefox.

Existia uma propriedade em document.fullscreen que foi depreciada em favor da propriedade document.fullscreenElement. Porém, no Chrome e no Edge essa propriedade sempre é null quando o fullscreen é o nativo do browser https://stackoverflow.com/a/58694542 se a tab está em fullscreen foi iniciado por F11.

No Firefox a propriedade document.fullscreenElement retorna o elemento html o que parece estar correto.

---

Vi em outro lugar no stackoverflow a opção de tentar comparar window.innerHeight === window.outerHeight && window.innerWidth === window.innerWidth, juntei com o window.fullScreen e document.fullscreenElement e fiz este tempo..

demo: https://c3wpi.csb.app/
código: https://codesandbox.io/s/load-in-fullscreen-c3wpi?file=/index.html

---

Porém, este tópico aqui é para perguntar... existe uma maneira menos gambiarra de fazer isso?

---

Mesmo que eu consiga "identificar" que o browser está em tela cheia, não existe nenhum método no JavaScript que permite sair do modo de tela cheia.

---

A Fullscreen API funciona tanto para entrar em tela cheia, quanto para sair de tela cheia. Porém, é totalmente incompatível com a forma "nativa" dos browser de entrar em tela cheia, exemplo: F11.