เรียนรู้วิธีตรวจจับว่าความกว้างหน้าจอมากกว่าหรือน้อยกว่าค่าที่ระบุใน 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()เข้ากับอ็อบเจ็กต์ window - ภายใน event listener เราตั้งค่าสองอาร์กิวเมนต์
'resize'และfunction() {} - อาร์กิวเมนต์แรกขอให้ event listener ฟัง resize events (แม้การปรับขนาดเล็กน้อยก็จะลงทะเบียนเป็นเหตุการณ์) จากนั้นรัน anonymous function ตามเหตุการณ์ resize
- ภายในเนื้อหาของ anonymous function เราเริ่มต้นสองเงื่อนไขแบบมีเงื่อนไข
- เงื่อนไขแรก: "ถ้าความกว้างหน้าจอ (ของอุปกรณ์ใดๆ) อย่างน้อย 500px ให้ console.log('do something')" เงื่อนไขที่สอง: "ถ้าความกว้างหน้าจอน้อยกว่า 500px ให้ console.log('do something else')"
เล่นกับโค้ดบน CodePen
