ปกติแล้ว เวลาเราจะทำ Responsive Web เรามักจะใช้ Media Queries ของ css3 ในการแยกเคสของ device ต่างๆ ใช่มั้ยครับ
1 2 | <link rel="stylesheet" media="all" href="styles.css" /> <link rel="stylesheet" media="(max-width: 480px)" href="tablet.css" /> |
จากตัวอย่างข้างต้น สำหรับกรณีทั่วไป เราจะเรียกใช้ styles.css แต่ถ้าหากหน้าต่างแสดงผลของ Web Browser มีขนาดไม่เกิน 480px เราจะเรียก tablet.css เพิ่มเข้ามาอีกตัวครับ
คำถามคือ หากเราต้องการให้หน้าเว็บเรา โหลด Javascript เฉพาะตัวที่ใช้งานกับ Device นั้นๆ จะทำอย่างไร?
ตัวอย่างเช่น เรามี Javascript สำหรับทำ Chat Room อยู่ แต่เราไม่ต้องการให้ผู้ใช้งานที่ใช้มือถือ หรือหน้าจอขนาดเล็กๆ ต้องมาโหลด Javascript ตัวนี้ เพื่อการแสดงผลที่รวดเร็วกว่า เราสามารถแก้ปัญหานี้ได้โดยใช้ API ของ Javascript ที่มีชื่อว่า window.matchMedia ครับ
วิธีใช้งานนั้นง่ายมากครับ เพราะเราสามารถใช้การเขียนเคสต่างๆ เหมือนที่ใช้กับ Media Queries ใน css3 ได้เลยครับ
1 2 3 4 5 6 7 | var mq = window.matchMedia("(max-width: 480px)"); if (mq.matches) { // window width is not over 480px } else { // window width is more than 480px } |
จะเห็นว่าการใช้งานนั้น ไม่ยากเลยใช่มั้ยครับ จริงๆ แล้ว window.matchMedia เป็นเพียงวิธีหนึ่ง ในการแยกเคส Device ของผู้ใช้งาน ไว้คราวหน้าผมจะนำวิธีอื่นๆ มาเล่านะครับ