"meta viewport user-scalable = no" ใน Google Maps API คืออะไร

99

ฉันใช้ Google Maps JavaScript API V3 และตัวอย่างอย่างเป็นทางการคุณจะใส่เมตาแท็กนี้ไว้เสมอ:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

ตัวอย่างของบุคคลที่สามส่วนใหญ่ที่ฉันเคยเห็นก็ทำเช่นกัน ฉันเขียนปลั๊กอินโดยใช้มันและผู้ใช้คนหนึ่งของฉันบอกฉันว่ามันทำให้เขาไม่สามารถซูมเข้าและออกบนอุปกรณ์มือถือของเขาได้ ฉันไม่มีอุปกรณ์มือถือที่จะทดสอบและไม่มีการค้นหาของฉันเปิดเผยข้อมูลที่เป็นประโยชน์ใด ๆ

แล้วจุดของแท็กคืออะไร? ฉันควรปล่อยไว้หรือไม่ ฉันควรพยายามตรวจหาตัวแทนเบราว์เซอร์และแสดงเฉพาะเบราว์เซอร์เดสก์ท็อปหรือไม่

หากคุณต้องการที่จะตรวจสอบปลั๊กอินคุณสามารถดาวน์โหลดได้ , เรียกดูแหล่งที่มาหรือดูตัวอย่างจริง

mobile  google-maps-api-3  viewport  meta-tags 
— เอียนดันน์
แหล่งที่มา
btw, Chrome เขียนในคอนโซล "The key" user-scaleable "ไม่รู้จักและเพิกเฉย" ถ้าคุณใช้มันแม้จะมีค่า "ใช่" ก็ตาม - OOPS เพิ่งสังเกตเห็นว่าฉันมี "e" ใน "scaleable" ราวกับว่ามันสามารถมี "เกล็ด (มังกร) :-)
— George Birbilis

คำตอบ:

110

ในอุปกรณ์จำนวนมาก (เช่น iPhone) จะป้องกันไม่ให้ผู้ใช้ใช้การซูมของเบราว์เซอร์ หากคุณมีแผนที่และเบราว์เซอร์ทำการซูมผู้ใช้จะเห็นภาพพิกเซลขนาดใหญ่พร้อมป้ายกำกับพิกเซลขนาดใหญ่ แนวคิดคือผู้ใช้ควรใช้การซูมที่ Google Maps ให้ไว้ ไม่แน่ใจเกี่ยวกับการโต้ตอบกับปลั๊กอินของคุณ แต่นั่นคือสิ่งที่มีไว้เพื่อ

เมื่อไม่นานมานี้ในขณะที่ @ehfeng บันทึกไว้ในคำตอบของเขา Chrome สำหรับ Android (และอาจเป็นอื่น ๆ ) ได้ใช้ประโยชน์จากข้อเท็จจริงที่ว่าไม่มีเบราว์เซอร์ดั้งเดิมที่ซูมหน้าเว็บที่มีแท็กวิวพอร์ตแบบนั้น สิ่งนี้ช่วยให้พวกเขากำจัดความล่าช้า 300 มิลลิวินาทีในเหตุการณ์การสัมผัสที่เบราว์เซอร์ต้องรอและดูว่าการสัมผัสเพียงครั้งเดียวของคุณจะกลายเป็นการแตะสองครั้ง (ให้คิดว่า "คลิกเพียงครั้งเดียว" และ "ดับเบิลคลิก") อย่างไรก็ตามเมื่อคำถามนี้ถูกถามในตอนแรก (ในปี 2554) สิ่งนี้ไม่เป็นความจริงในเบราว์เซอร์มือถือใด ๆ มันเป็นเพียงแค่ความยอดเยี่ยมที่เพิ่มขึ้นโดยบังเอิญเมื่อไม่นานมานี้

— ทร็อตต์
แหล่งที่มา
ฉันคิดว่ามันปิดใช้งานการซูมใน iphone, ipad .. ของ Safari เท่านั้น Android ของฉันไม่สนใจมัน (ส่วนที่ผู้ใช้ปรับขนาดได้ไม่ใช่ส่วนที่เหลือของแท็กวิวพอร์ตแน่นอน)
— ฮวน
@Juan มันเป็นมากกว่าแค่ iOS / Safari ฉันพนันได้เลยว่ามันถูกนำไปใช้ใน Chrome สำหรับ Android เป็นต้น แต่ใช่สิ่งที่วิวพอร์ตใช้ไม่ได้ในเบราว์เซอร์ Android 2.X จำนวนมาก
— Trott
1
อย่าทำอย่างนั้น ทำให้บางเว็บไซต์ไม่สามารถใช้งานได้บน Firefox สำหรับ Android (และอาจจะเป็นเว็บไซต์อื่น ๆ ) คุณไม่สามารถแน่ใจได้ว่าเพจของคุณจะแสดงอย่างถูกต้องในทุกเบราว์เซอร์และหากคุณลบการซูมผู้ใช้บางรายจะไม่สามารถใช้ไซต์ของคุณได้ เพียง 0.3 วินาที Yahoo Tech เป็นตัวอย่างหนึ่งหากไซต์ที่ไม่สามารถอ่านได้บน Firefox สำหรับ Android เนื่องจากไม่สามารถซูมได้
— Josh
อีกหนึ่งผลข้างเคียงที่น่าสนใจของ user-scalable = ไม่คือมันแก้ไขปัญหาเกี่ยวกับตำแหน่ง: เมนูคงที่บนเบราว์เซอร์ Android 2.X (แม้ว่าคุณจะสามารถใช้ -webkit-backface-visibility: hidden;)
— Christian Butzke
47

การปิดใช้งานที่ผู้ใช้สามารถปรับขนาดได้ (กล่าวคือความสามารถในการแตะสองครั้งเพื่อซูม) ช่วยให้เบราว์เซอร์ลดความล่าช้าในการคลิก ในเบราว์เซอร์ที่เปิดใช้งานระบบสัมผัสเมื่อผู้ใช้คาดว่าการแตะสองครั้งเพื่อซูมโดยทั่วไปเบราว์เซอร์จะรอ 300 มิลลิวินาทีก่อนที่จะเริ่มเหตุการณ์การคลิกเพื่อรอดูว่าผู้ใช้จะแตะสองครั้งหรือไม่ การปิดใช้งานที่ผู้ใช้สามารถปรับขนาดได้ช่วยให้เบราว์เซอร์ Chrome เริ่มการทำงานของเหตุการณ์การคลิกได้ทันทีเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น

จากเซสชัน Google IO 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

อัปเดต: มันไม่เป็นความจริงอีกต่อไป<meta name="viewport" content="width=device-width">ก็เพียงพอที่จะลบความล่าช้า 300ms

— เอ๋เฟิง
แหล่งที่มา
ในทางกลับกันสิ่งนี้ไม่ดีสำหรับการเข้าถึงสำหรับผู้ใช้ที่พิการ ฉันเชื่อว่าแนวทางมาตรา 508 ระบุว่าผู้ใช้ต้องสามารถซูมเข้าได้ถึง 200%
— Graham Fowles
10

จากเอกสาร v3 (คู่มือสำหรับนักพัฒนา> แนวคิด> การพัฒนาสำหรับอุปกรณ์เคลื่อนที่):

อุปกรณ์ Android และ iOS เคารพ<meta>แท็กต่อไปนี้:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

การตั้งค่านี้ระบุว่าควรแสดงแผนที่แบบเต็มหน้าจอและผู้ใช้ไม่ควรปรับขนาดได้ โปรดทราบว่าเบราว์เซอร์ Safari ของ iPhone ต้องการให้<meta>แท็กนี้รวมอยู่ใน<head>องค์ประกอบของหน้า

— เหม็น 345
แหล่งที่มา
3

คุณไม่ควรใช้เมตาแท็กของวิวพอร์ตเลยหากการออกแบบของคุณไม่ตอบสนอง การใช้แท็กนี้ในทางที่ผิดอาจทำให้เค้าโครงเสีย คุณสามารถอ่านบทความนี้เพื่อดูเอกสารเกี่ยวกับสาเหตุที่คุณไม่ควรใช้แท็กนี้เว้นแต่คุณจะรู้ว่าคุณกำลังทำอะไรอยู่ http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" ยังช่วยป้องกันเอฟเฟกต์การย่อ / ขยายในช่องป้อนข้อมูลของ iOS

— Horia Rudan
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.