API MediaQueryList JavaScript

Objek MediaQueryList

Atribut MediaQueryList Menyimpan informasi dari media query.

Atribut MediaQueryList ObjekObjek jendelaObjek

Atribut MediaQueryList Objek dapat diakses melalui cara berikut:

window.matchMedia() atau hanya dengan matchMedia():

Contoh

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Coba sendiri

Lihat pula:

Metode window.matchMedia()

Atribut MediaQueryList

Atribut Deskripsi
matches Nilai boolean. Jika dokumen cocok dengan query, maka true, jika tidak maka false.
media Nilai string. Media query (daftar).

Metode MediaQueryList

Metode Deskripsi
addListener() Tambahkan fungsi pendengar baru, yang akan dieksekusi setiap kali hasil penilaian media query berubah.
removeListener()

Hapus pendengar sebelumnya yang ditambahkan dari daftar media query.

Jika pendengar yang ditentukan tidak ada di dalam daftar, tak ada tindakan yang dijalankan.

Media query

matchMedia() Media query yang dapat digunakan metode Atur @media CSS Karakteristik media apa pun, seperti min-height, min-width, orientasi, dll.

Contoh

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Coba sendiri

Jenis media

Nilai Deskripsi
all Default. Digunakan untuk semua perangkat jenis media.
print Untuk printer.
screen Untuk layar komputer, tablet, ponsel cerdas, dan sebagainya.
speech Perangkat baca layar untuk membaca halaman dengan suara

Karakteristik media

Nilai Deskripsi
any-hover Apakah ada mekanisme input yang tersedia untuk memungkinkan pengguna menempatkan mouse di atas elemen?
(ditambahkan di Media Queries Level 4).
any-pointer Apakah ada mekanisme input yang tersedia adalah perangkat penunjuk, jika ya, ketinggian akurasi nya seperti apa?
(ditambahkan di Media Queries Level 4).
aspect-ratio Rasio lebar tinggi layar
color Bit penampung warna untuk setiap komponen warna perangkat output.
color-gamut Rentang warna yang didukung oleh peran agen dan perangkat output
(ditambahkan di Media Queries Level 4)
color-index Jumlah warna yang dapat ditampilkan perangkat.
grid Apakah perangkat adalah grid atau bitmap?
height Tinggi viewport.
hover Apakah mekanisme input utama mengizinkan pengguna untuk melewati elemen dengan mouse?
(ditambahkan di Media Queries Level 4)
inverted-colors Apakah browser atau sistem operasi dasar membalik warna?
(ditambahkan di Media Queries Level 4).
light-level Tingkat ketinggian cahaya lingkungan saat ini (ditambahkan di Media Queries Level 4).
max-aspect-ratio Rasio lebar tinggi maksimum area tampilan.
max-color Jumlah bit maksimum untuk setiap komponen warna di perangkat output.
max-color-index Jumlah warna yang dapat ditampilkan perangkat.
max-height Tinggi maksimum area tampilan, seperti jendela browser.
max-monochrome Jumlah bit maksimum untuk setiap 'warna' di perangkat monokrom (grayscale).
max-resolution Resolusi maksimum perangkat, menggunakan dpi atau dpcm.
max-width Lebar maksimum area tampilan, seperti jendela browser.
min-aspect-ratio Rasio lebar tinggi minimum area tampilan.
min-color Jumlah bit minimum untuk setiap komponen warna di perangkat output.
min-color-index Jumlah warna yang dapat ditampilkan perangkat.
min-height Tinggi minimum area tampilan, seperti jendela browser.
min-monochrome Jumlah bit minimum untuk setiap 'warna' di perangkat monokrom (grayscale).
min-resolution Resolusi minimum perangkat, menggunakan dpi atau dpcm.
min-width Lebar minimum area tampilan, seperti jendela browser.
monochrome Jumlah bit untuk setiap 'warna' di perangkat monokrom (grayscale).
orientation Arah viewport (mode horizontal atau vertical).
overflow-block Bagaimana perangkat output menangani konten yang melampaui viewport di sumbu block (ditambahkan di Media Queries Level 4)?
overflow-inline Apakah dapat digerakkan konten yang melampaui viewport di sumbu inline (ditambahkan di Media Queries Level 4)?
pointer Apakah mekanisme input utama adalah perangkat penunjuk? Jika ya, ketinggian akurasi nya seperti apa?
(ditambahkan di Media Queries Level 4).
resolution Resolusi perangkat output, menggunakan dpi atau dpcm.
scan Proses pemindaian perangkat output.
scripting Apakah dapat digunakan skrip (seperti JavaScript) (ditambahkan di Media Queries Level 4)?
update Berapa cepat perangkat output dapat mengubah penampilan konten (ditambahkan di Media Queries Level 4).
width LebarViewport.