หากคุณใช้การตั้งค่าเมตาวิวพอร์ต HTML ทั่วไป การคลิกที่องค์ประกอบอินพุตจะทริกเกอร์การซูมอัตโนมัติบนอุปกรณ์ iOS โดยอัตโนมัติ อย่างน้อยบนสมาร์ทโฟน ฉันได้ทดสอบสิ่งนี้บน iPhone 4, 5 และ 6 โดยใช้เบราว์เซอร์ Safari และ Chrome จากการวิจัยของฉัน อุปกรณ์ iOS ทั้งหมดก็เหมือนกัน
โค้ด HTML นี้เป็นสิ่งที่ทำให้เอฟเฟกต์การซูมอัตโนมัติเกิดขึ้นได้:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />แต่เอฟเฟกต์การซูมอัตโนมัตินี้ไม่เป็นที่ต้องการเสมอไป บางครั้งอาจส่งผลเสียต่อการใช้งานเว็บแอปของคุณ ขึ้นอยู่กับบริบทโดยสิ้นเชิง
หากต้องการปิดใช้งานเอฟเฟกต์นี้ทั้งใน Safari และ Chrome คุณสามารถใช้สิ่งต่อไปนี้แทน:
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
รหัสใหม่เพียงอย่างเดียวคือเราเพิ่มค่า maximum-scale=1 ไปที่ meta content แอตทริบิวต์
สำคัญ
การดำเนินการนี้ไม่ได้ปิดใช้งานตัวเลือก ด้วยตนเอง ซูมเข้าและออกใน Safari โดยจะปิดใช้งานฟังก์ชันซูมอัตโนมัติเท่านั้น
แต่ในเบราว์เซอร์มือถือของ Chrome (บนอุปกรณ์ iOS) ใช้ได้ ปิดใช้งานตัวเลือกการซูมด้วยตนเอง นี่อาจเป็นปัญหา ขึ้นอยู่กับกรณีการใช้งานของคุณ
ฉันยังไม่พบโซลูชัน HTML แท้ ๆ ที่ให้คุณยังคงซูมแบบแมนนวลใน Chrome ได้ ถ้าฉันทำ ฉันจะอัปเดตบทความนี้
วิธีแก้ปัญหาที่ง่ายกว่ามาก
หากคุณกำหนดขนาดแบบอักษรขั้นต่ำให้กับองค์ประกอบอินพุตของคุณที่ 16px ซึ่งต่างจากขนาดเริ่มต้น 11px การดำเนินการนี้จะลบเอฟเฟกต์การซูมอัตโนมัติบนทั้ง Safari และ Chrome อย่างน้อยมันก็ทำในการทดสอบของฉัน
ด้วยวิธีนี้ คุณสามารถหลีกเลี่ยงการเพิ่มค่ามาตราส่วนสูงสุด-1 ให้กับแอตทริบิวต์เนื้อหาของคุณ และหลีกเลี่ยงการจำกัดการซูมด้วยตนเองใน Chrome
เดี๋ยวก่อน ทำไมคุณไม่แนะนำวิธีแก้ปัญหานี้ก่อน
คุณอาจไม่ต้องการใช้ขนาดแบบอักษร 16px ในฟิลด์ป้อนข้อมูลทั้งหมดของคุณบนมือถือ การดำเนินการนี้จะบังคับให้คุณปรับรูปแบบตัวอักษรของ UI บนอุปกรณ์เคลื่อนที่ให้เหมาะสมกับช่องป้อนข้อมูลของคุณ
และเช่นเดียวกับแทบทุกอย่าง ปัญหานี้สามารถแก้ไขได้โดยทางโปรแกรมโดยใช้ JavaScript แต่นั่นก็อยู่นอกเหนือขอบเขตของบทความนี้
นอกจากนี้ ระวังด้วยว่าโดยทั่วไปแล้วการจำกัดผู้ใช้ของคุณจากการซูมนั้นไม่แนะนำ ข้อมูลเพิ่มเติมที่ W3Schools แต่อีกครั้งก็ขึ้นอยู่กับบริบท
คงจะดีถ้ามีการตั้งค่าง่ายๆ ที่สามารถแก้ไขปัญหานี้ได้ในทุกอุปกรณ์ในคราวเดียว หากคุณมีข้อมูลเชิงลึกเกี่ยวกับหัวข้อนี้ โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง :-)
