หากใช้ Viewport Meta Settings ทั่วไป การคลิก Input Element จะ Trigger Auto Zoom บน iOS อัตโนมัติ อย่างน้อยบน Smartphone ทดสอบบน iPhone 4, 5, 6 ด้วย Safari และ Chrome เหมือนกันทุก iOS
โค้ด HTML นี้ทำให้ Auto Zoom เกิดขึ้น:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />แต่ Auto Zoom ไม่ได้เหมาะสมเสมอไป บางครั้งทำให้ Usability แย่ลง ขึ้นกับบริบท
เพื่อปิดผลกระทบนี้บน Safari และ Chrome ใช้แทน:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />โค้ดใหม่เพียงแค่เพิ่มค่า maximum-scale=1 ใน Meta content Attribute
สำคัญ
นี่ ไม่ ปิดการ Zoom แบบ Manual บน Safari ปิดแค่ Auto Zoom
แต่บน Chrome Mobile (iOS) ปิด การ Zoom แบบ Manual ด้วย อาจเป็นปัญหา ขึ้นกับ Use Case
ยังไม่เจอ Pure HTML Solution ที่เก็บ Manual Zoom ใน Chrome ได้ เจอจะ Update
วิธีง่ายกว่ามาก
ถ้าให้ Input Elements มี Minimum Font Size 16px แทน Default 11px จะลบ Auto Zoom Effect ทั้ง Safari และ Chrome ได้ ตามทดสอบของผม
วิธีนี้ หลีกเลี่ยงการเพิ่ม maximum-scale=1 และไม่จำกัด Manual Zoom ใน Chrome
รอ ทำไมไม่แนะนำวิธีนี้ก่อน?
เพราะอาจไม่อยากใช้ Font Size 16px บน Input Fields ทุกตัวบน Mobile จะบังคับให้ปรับ Typography UI Mobile ให้เข้ากับ Input Fields
และเหมือนทุกอย่าง ปัญหานี้แก้ได้ด้วย JavaScript แต่เกินขอบเขตบทความ
ยัง การจำกัด User จากการ Zoom โดยทั่วไปไม่แนะนำ อ่านเพิ่มที่ W3Schools แต่ขึ้นกับบริบท
จะดีถ้ามี Setting เรียบง่ายแก้ปัญหานี้ครอบคลุมทุกอุปกรณ์ พบข้อมูลเพิ่มเติม Comment บอกได้เลย :-)
