ใช้ Media Queries กับ Javascript ด้วย window.matchMedia

ปกติแล้ว เวลาเราจะทำ Responsive Web เรามักจะใช้ Media Queries ของ css3 ในการแยกเคสของ device ต่างๆ ใช่มั้ยครับ

จากตัวอย่างข้างต้น สำหรับกรณีทั่วไป เราจะเรียกใช้ styles.css แต่ถ้าหากหน้าต่างแสดงผลของ Web Browser มีขนาดไม่เกิน 480px เราจะเรียก tablet.css เพิ่มเข้ามาอีกตัวครับ

คำถามคือ หากเราต้องการให้หน้าเว็บเรา โหลด Javascript เฉพาะตัวที่ใช้งานกับ Device นั้นๆ จะทำอย่างไร?

ตัวอย่างเช่น เรามี Javascript สำหรับทำ Chat Room อยู่ แต่เราไม่ต้องการให้ผู้ใช้งานที่ใช้มือถือ หรือหน้าจอขนาดเล็กๆ ต้องมาโหลด Javascript ตัวนี้ เพื่อการแสดงผลที่รวดเร็วกว่า เราสามารถแก้ปัญหานี้ได้โดยใช้ API ของ Javascript ที่มีชื่อว่า window.matchMedia ครับ

วิธีใช้งานนั้นง่ายมากครับ เพราะเราสามารถใช้การเขียนเคสต่างๆ เหมือนที่ใช้กับ Media Queries ใน css3 ได้เลยครับ

จะเห็นว่าการใช้งานนั้น ไม่ยากเลยใช่มั้ยครับ จริงๆ แล้ว window.matchMedia เป็นเพียงวิธีหนึ่ง ในการแยกเคส Device ของผู้ใช้งาน ไว้คราวหน้าผมจะนำวิธีอื่นๆ มาเล่านะครับ

(Visited 1,320 times, 1 visits today)

Leave a Reply