Jendela pertandinganMedia()
Contoh 1
Apakah lebar layar/area pandang lebih besar dari 700 piksel:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definisi dan Penggunaan
Metode matchMedia()mengembalikan MediaQueryList dengan hasil dari kueri.
Lihat juga:
Pertanyaan Media
Kueri media dari matchMedia()metode ini dapat berupa fitur media apa pun dari
aturan @media CSS , seperti tinggi minimum, lebar minimum, orientasi, dll.
Contoh
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sintaksis
window.matchMedia(mediaQuery)
Parameter
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
Nilai Kembali
| Jenis | Keterangan |
| Sebuah Objek | Objek MediaQueryList dengan hasil kueri media. |
Contoh Dijelaskan
Contoh pertama di halaman ini menjalankan kueri media dan membandingkannya dengan status jendela saat ini .
Untuk menjalankan kueri media responsif setiap kali status jendela berubah, tambahkan event listener ke objek MediaQueryList (Lihat "Contoh Lainnya" di bawah):
Lebih Banyak Contoh
Jika area pandang kurang atau sama dengan lebar 500 piksel, atur warna latar belakang menjadi kuning, jika tidak menjadi merah muda:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Dukungan Peramban
matchMedia() didukung di semua browser modern:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |