คำสั่ง vanilla js เพื่อเช็คขนาดความกว้างด้วย matchMedia

อยากให้ vanilla js ทำงานเฉพาะมือถือหรือขนาดจอที่กำหนด เช็คด้วย matchMedia ประสิทธิภาพดีกว่า resize 

ตัวอย่างโค้ด

// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia(‘(min-width: 768px)’)

function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
// Then log the following message to the console
console.log(‘Media Query Matched!’)
}
}

// Register event listener
mediaQuery.addListener(handleTabletChange)

// Initial check
handleTabletChange(mediaQuery)

ที่มา

css-tricks.com

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย