บางท่านอาจจะเคยพัฒนา Web Application ที่นอกจากจะนำไปใช้งานบน Desktop และ Mobile Browser แล้ว ยังคาดหวังที่จะนำไปใช้ในรูปแบบของ WebView บน Native Application เพื่อที่จะได้พัฒนาทั้ง Web และ Application ได้ในคราวเดียว แต่เราอาจพบว่าการใช้งานบน Application นั้นไม่ควรที่จะย่อ/ขยาย หน้าจอเนื้อหาได้ด้วยการ Double Tap และ Pinch เหมือนกับการใช้งานบน Browser วันนี้เราจึงรวบรวมวิธีการป้องกันการ Zoom จาก Double Tap และ Pinch สำหรับ Android และ iOS ด้วย HTML, CSS และ JavaScript มาฝากกัน
![](https://map-blog.longdo.com/wp-content/uploads/2021/05/android.gif)
![](https://map-blog.longdo.com/wp-content/uploads/2021/05/ios.gif)
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