check js ด้วย matchMedia()

ในการทำ Responsive Web หรือการทำให้หน้า web ปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ คำสั่งหลักที่จะใช้ check การแสดงผลคือ CSS3 Media Query แต่คำสั่งนี้จะใช้ check ได้แค่ css เท่านั้น ซึ่งถ้าเรา check javascript ด้วยการซ่อนส่วนๆ นั้นด้วย css .. script ก็จะยังคงทำงานอยู่ ทำให้ที่บาง device จะต้องโหลดบางอย่างไปโดยไม่จำเป็น

ดังนั้นหากเราต้องการให้ script นั้นจะโหลดตาม device ที่ต้องการเราจะใช้matchMedia() เข้ามาช่วยในการ ในการตรวจสอบว่าหน้าจอที่แสดงผล
อยู่ในขณะนั้น เป็นขนาดของ device ตามที่กำหนดหรือไม่ (แบบ css Media Query)

มีวิธีการเขียนดังนี้ค่ะ

คำสั่งหลักที่เราใช้ก็คือ window.matchMediaตามด้วย ขนาดหน้าจอ แบบ คำสั่งที่เราใช้กับ Media Query ได้เลย

สามารถ define ค่าไว้เพื่อความสะดวกในการนำค่าไปใช้ต่อค่ะ

โดยปกติแล้วคำสั่งจะทำงานตอนที่เรา load หน้ารอบเดียว ถ้าเรายืดหดหน้าจอจะต้องรีเฟรชเพื่อ check ขนาดหน้าจอ ดังนั้นเราจึงจะต้องเพิ่มให้ check function สำหรับการเปลี่ยนแปลงขนาดหน้าจอไว้ จะต้องใช้ methods/event handlers เพิ่มเติมมาช่วย check onchange state นั่นก็คือคำสั่ง removeListener และ addListener โดยวิธีการใช้จะเขียนดังนี้ค่ะ

อธิบายคำสั่งด้านบนเราจะ define ค่า mediaQuery ไว้แล้วเขียน function เพื่อเช็ค โดยที่เราจะเพิ่ม Call function ไว้เพื่อให้ addListener เรียก function นั้นเมื่อถึงค่าที่เราตั้ง breakpoint ไว้

Tryit Editor v3.6

จากตัวอย่างจะเห็นได้ว่าเมื่อเราหดหรือยืดจอไปแตะที่ความกว้าง 700px bg ก็จะเปลี่ยนสีทันทีโดยที่ไม่ต้อง refresh หน้าให้ทำคำสั่งเช็คใหม่ค่ะ แค่นี้เราก็จะสามารถเช็คคำสั่งได้เหมือนกับ css Media Query แล้วค่ะ

ทดลองใช้คำสั่งกับ jquery

เราจะลองมาทดสอบการ add และ remove html กันด้วย jquery กัน โดยมีโจทย์ว่าให้ที่หน้าจอตั้งแต่ 1000px ขึ้นไปแสดงภาพ แต่ที่หน้าจอเล็กกว่านั้นไม่แสดง

ผลการแสดงที่ต้องการที่หน้าจอ 1000px ขึ้นไป

ผลการแสดงที่ต้องการที่หน้าจอกว้างน้อยกว่า 1000px

<div class="wrapper"> 
    <h1>NASA would really like it if you stared at the moon on Saturday night</h1> 
    <div id="img"></div>
    .
    .
    .
</div>

โดยที่ html เราจะกำหนด <div id="img"></div>เอาไว้เพื่อใช้ในการเช็ค add element จากนั้นก็จะกำหนดค่าตัวแปร mediaQuery ไว้ที่ min-width: 1000px

const mediaQuery = window.matchMedia("(min-width: 1000px)")
function myFunction(mediaQuery) {
  if (mediaQuery.matches) { 
   ...
  } else {
   ...
  }
}
myFunction(mediaQuery) 
mediaQuery.addListener(myFunction)

ใส่คำสั่ง $("#img").html()โดยเพิ่ม​ <img /> ที่ต้องการใส่ และเราจะใช้คำสั่ง remove เพื่อลบ <img /> ออกค่ะ

function myFunction(mediaQuery) {
  if (mediaQuery.matches) { 
     $("#img").html(`<img src="https://i.pinimg.com/originals/da/8e/6a/da8e6af8f3c0745683da2e8dd7acb8e2.png" />`); 
  } else { 
     $('#img > img').remove();
  }
}

ถ้าหาก inspect ดูจะพบว่า ไม่มี img tag แสดงที่ความกว้างน้อยกว่า 1000px ค่ะ

การแสดงผลที่หน้าจอกว้างน้อยกว่า 1000px

สามารถ ดู code ตัวอย่างทั้งหมดได้ที่ https://codepen.io/pimpinee14/pen/LYNdyoK

เพิ่มเติมการ detect dark mode ใน device (ส่วนนี้แถมค่ะ 😸)

เนื่องจากตอนนี้หลาย device นั้นมีการเพิ่มในส่วนของ dark mode และ Media Queries ได้เพิ่มคำสั่งเพื่อเช็คในส่วนนี้มาแล้วคือคำสั่ง prefers-color-scheme นั่นเอง และแน่นอนว่าเราสามารถเอามาใช้กับ matchMedia ได้เช่นกันค่ะ

detect dark mode ใน device แบบ js และ แบบ css

บทความอ้างอิง

Working with JavaScript Media Queries | CSS-Tricks

เพิ่มธีมสีมืดให้เว็บไซต์ด้วย prefers-color-scheme | LazyWasabi

Detecting Screen Size and OS Dark Mode in JavaScript