หน้าต่าง matchMedia()
ตัวอย่าง 1
หน้าจอ/วิวพอร์ตกว้างกว่า 700 พิกเซลหรือไม่:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
ความหมายและการใช้งาน
matchMedia()
เมธอดส่งกลับMediaQueryList พร้อมผลลัพธ์จากการสืบค้น
ดูสิ่งนี้ด้วย:
แบบสอบถามสื่อ
คิวรี่สื่อของmatchMedia()
เมธอดสามารถเป็นคุณลักษณะสื่อใดๆ ของ
กฎ CSS @mediaเช่น ความสูงต่ำสุด ความกว้างต่ำสุด การวางแนว ฯลฯ
ตัวอย่าง
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
ไวยากรณ์
window.matchMedia(mediaQuery)
พารามิเตอร์
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
คืนมูลค่า
พิมพ์ | คำอธิบาย |
วัตถุ | วัตถุ MediaQueryList ที่มีผลลัพธ์ของการสืบค้นสื่อ |
ตัวอย่างที่อธิบาย
ตัวอย่างแรกในหน้านี้เรียกใช้แบบสอบถามสื่อและเปรียบเทียบกับสถานะหน้าต่างปัจจุบัน
ในการเรียกใช้แบบสอบถามสื่อ ที่ ตอบสนองทุกครั้งที่สถานะของหน้าต่างเปลี่ยนแปลง ให้เพิ่มตัวฟังเหตุการณ์ไปยังวัตถุ MediaQueryList (ดู "ตัวอย่างเพิ่มเติม" ด้านล่าง):
ตัวอย่างเพิ่มเติม
หากวิวพอร์ตมีความกว้างน้อยกว่าหรือเท่ากับ 500 พิกเซล ให้ตั้งค่าสีพื้นหลังเป็นสีเหลือง มิฉะนั้นจะเป็นสีชมพู:
// 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);
รองรับเบราว์เซอร์
matchMedia()
ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |