CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}Peki bu kontrolleri javascript tarafında nasıl yaparız diye araştırınca window.matchMedia ile karşılaştım. Bildiğimiz CSS medya kulanımının aynısını yapabiliyoruz.
var ms = window.matchMedia("SORGU");SORGU yazan kısma CSS’de yazdığımız kısmı birebir yazıp kontrol edebiliyoruz.
var ms = window.matchMedia("screen and (min-width:720px)");Sonra kontrolümüzü yapalım.
if (ms.matches) {
// ekran genişliği en az 720px
} else {
// ekran genişliği 720px den büyük olanlar.
}Tarayıcı desteğinin %100’e yakın olması da ayrı bi güzellik.