Kategoriler
Kodlama

CSS ile tam ekran modu nasıl tespit edilir?

CSS ile fullscreen, standalone, minimal-ui, and browser seçeneklerini tespit edip özel kodlar yazabilirsiniz.

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
    }
});

wolkanca.com’da CSS ile tam ekran modu nasıl tespit edilir? veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, CSS ile tam ekran modu nasıl tespit edilir? için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.