วิธีป้องกันการ Zoom จาก Double Tap และ Pinch บน Mobile Browsers ด้วย HTML, CSS และ JavaScript

บางท่านอาจจะเคยพัฒนา Web Application ที่นอกจากจะนำไปใช้งานบน Desktop และ Mobile Browser แล้ว ยังคาดหวังที่จะนำไปใช้ในรูปแบบของ WebView บน Native Application เพื่อที่จะได้พัฒนาทั้ง Web และ Application ได้ในคราวเดียว แต่เราอาจพบว่าการใช้งานบน Application นั้นไม่ควรที่จะย่อ/ขยาย หน้าจอเนื้อหาได้ด้วยการ Double Tap และ Pinch เหมือนกับการใช้งานบน Browser วันนี้เราจึงรวบรวมวิธีการป้องกันการ Zoom จาก Double Tap และ Pinch สำหรับ Android และ iOS ด้วย HTML, CSS และ JavaScript มาฝากกัน

1. HTML

กำหนด Viewport Meta Tag ใน Header HTML ลงไป โดยป้องกันการ Zoom จากทั้ง Double Tap และ Pinch แต่มีผลเฉพาะกับ Android เท่านั้น

<meta name="viewport" content="width=device-width, height=device-height, target-densitydpi=device-dpi, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2. CSS

กำหนด CSS touch-action ซึ่งป้องกันการ Zoom จาก Double Tap บน iOS Safari Browser

* {
    touch-action: manipulation;
}

3. JavaScript

วิธีสุดท้ายนี้เป็นการควบคุมการทำงาน Event ที่เกิดขึ้นบน Document Window ของเราด้วย JavaScript แบ่งออกเป็น 2 ส่วน คือ

3.1. การจัดการกับ touchstart Event เพื่อที่จะตรวจจับรูปแบบของการ Double Tap และเมื่อตรวจพบก็จะสั่งให้หยุดการทำงานพื้นฐานของ Event นั้น ซึ่งในที่นี้ก็คือการ Zoom

// prevent zooming from double tapping on iOS
window.lastTouchTimestamp = 0;
document.addEventListener('touchstart', function (event) {
const nowTouchTimestamp = new Date().getTime();
const tapDelayThreshold = 300;
const tapDelay = nowTouchTimestamp - window.lastTouchTimestamp;
    if (tapDelay <= tapDelayThreshold) {
        event.preventDefault();
    }
    window.lastTouchTimestamp = nowTouchTimestamp;
}, { passive: false });

3.2. การจัดการกับ touchmove Event เพื่อที่จะตรวจจับลักษณะว่ามีการ Pinch หรือไม่ และเมื่อตรวจพบก็จะสั่งให้หยุดการทำงานพื้นฐานของ Event นั้น ซึ่งในที่นี้ก็คือการ Zoom

// prevent zooming from pinching on iOS
document.addEventListener('touchmove', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, { passive: false });

---

และด้วย 3 วิธีง่ายๆ นี้ก็สามารถช่วยให้ Web ของคุณเนียนเป็น Application ขึ้นไปอีกระดับนึง
สามารถลอง DEMO หรือศึกษาตัวอย่าง Source Code เพิ่มเติม gitlab