เรียนรู้วิธีตรวจสอบว่าความกว้างของหน้าจอมากกว่าหรือน้อยกว่าค่าที่ระบุใน JavaScript
บางครั้งคุณต้องการรันโค้ดตามเงื่อนไข
อาจมีโค้ดบางอย่างที่คุณต้องการแสดงบนหน้าจอขนาดใหญ่แต่ไม่แสดงบนหน้าจอขนาดเล็ก (เช่น สมาร์ทโฟนส่วนใหญ่) เนื่องจากมีพื้นที่จำกัด
การจัดการ การตรวจจับประเภทอุปกรณ์เฉพาะ เป็นพื้นที่ที่ซับซ้อนซึ่งนักพัฒนาดูเหมือนจะไม่เห็นด้วย หลังจากการค้นคว้าหลายชั่วโมง ฉันยังคงรวบรวมข้อมูลที่น่าเชื่อถือไม่เพียงพอที่จะเขียนปากกาลงบนกระดาษ (เพื่อดำเนินการต่อ..)
วิธีตรวจสอบความกว้างของหน้าจอเป็นพิกเซลแบบไดนามิก
โชคดีที่การกำหนดเป้าหมายขนาดหน้าจอตามค่าพิกเซลทำได้ง่ายกว่ามาก และเป็นคุณลักษณะที่คุณจะได้รับประโยชน์ในหลาย ๆ สถานการณ์
วางโค้ดต่อไปนี้ลงในคอนโซลของเบราว์เซอร์หรือโปรแกรมแก้ไขออนไลน์ เช่น CodePen:
window.addEventListener("resize", function() {
if (window.matchMedia("(min-width: 500px)").matches) {
console.log("Screen width is at least 500px")
} else {
console.log("Screen less than 500px")
}
})ตอนนี้ เริ่มปรับขนาดหน้าต่างเบราว์เซอร์ของคุณจากแคบไปกว้าง แล้วสังเกตคอนโซลที่ออกจากระบบ
วิธีการทำงานของโค้ด JavaScript:
- ขั้นแรก เราแนบ
addEventListener()วิธีการไปยังวัตถุหน้าต่าง - ภายในตัวฟังเหตุการณ์ เราตั้งค่าอาร์กิวเมนต์ 2 ตัว
'resize'และfunction() {}. - อาร์กิวเมนต์แรกคือการขอให้ผู้ฟังเหตุการณ์ฟัง ปรับขนาดเหตุการณ์ (แม้เพียงเศษเสี้ยวของการปรับขนาดก็จะลงทะเบียนเป็นเหตุการณ์) จากนั้นเราก็เรียกใช้ ฟังก์ชัน . ที่ไม่ระบุตัวตน ตามเหตุการณ์การปรับขนาด
- ภายในเนื้อความของฟังก์ชันที่ไม่ระบุตัวตน เราเริ่มต้นคำสั่งแบบมีเงื่อนไข 2 แบบ
- เงื่อนไขแรก: “หากความกว้างของหน้าจอ (ของอุปกรณ์ใดๆ) อย่างน้อย 500px แสดงว่าคอนโซล.log('ทำอะไรบางอย่าง')” เงื่อนไขที่สอง: “หากความกว้างของหน้าจอน้อยกว่า 500px แสดงว่าคอนโซล.log('ทำอย่างอื่น')”
เล่นโค้ดบน CodePen
