CSS ile tam ekran modu nasıl tespit edilir?

Geçenlerde bir web uygulamasının tam ekran modunda gösterildiğinde tasarımsal değişikliklere ihtiyacı olduğunu gördüm, değiştirmek istediğim tek şey tam ekran modundayken bazı şeyleri gizlemekti ve bu konuda araştırma yaptım. Sonuçta bunun kolayca mümkün olduğunu gördüm.

Aşağıdaki CSS örneği bu sorunun cevabıdır, CSS ile tam ekran modu nasıl tespit edilir?

display-mode koşulu; fullscreen, standalone, minimal-ui, ve browser şeklinde kullanılabilir.

@media all and (display-mode: fullscreen){
  /* istediğiniz her CSS buraya 
   tam ekran modu için */
}

Örnek tam ekran modunda sayfanın arka plan rengini değiştirmek için:

@media all and (display-mode: fullscreen){
  body{
      background-color: lightpink;
 }
}

Ayrıca aynı mantığı JavaScript ile kullanmak:

window.matchMedia('(display-mode: fullscreen)')
  .addListener(({matches}) =>{
    if (matches){
        // Apply fullscreenmode mode related changes
   }else{
        // Remove fullscreenmode mode related changes
   }
});