หากคุณเป็นนักออกแบบเว็บไซต์ข้อผิดพลาดที่เรียกว่าการปรับขนาดของมุมมองอาจเผชิญหน้ากับคุณซึ่งเกิดขึ้นในอุปกรณ์ Apple เช่น iPod, iPhone และ iPad บางครั้งเมื่อเราหมุนอุปกรณ์ Apple ของเราจากแนวตั้งเป็นแนวนอนเว็บไซต์จะซูมเข้าเพื่อแสดงมุมมองที่มีความกว้างมากกว่าความกว้างของอุปกรณ์ นี่เป็นเพราะผู้ออกแบบได้ตั้งค่าความกว้างวิวพอร์ตเป็นความกว้างของอุปกรณ์ เพื่อช่วยให้คุณเข้าใจว่าข้อผิดพลาดนี้ทำงานอย่างไรเราออกแบบหน้าตัวอย่างและหมุน iPad ของเราจากแนวตั้งเป็นแนวนอน
การแก้ไขอย่างรวดเร็วสำหรับข้อผิดพลาดดังกล่าวจะนำเราไปสู่การตั้งค่า‘maximum-scale = 1’ ในแท็กเมตาวิวพอร์ต นี่เป็นการแก้ไขปัญหาในขณะนี้ แต่หน้าไม่สามารถซูมได้อีกต่อไปเนื่องจากเราแก้ไขความกว้างสูงสุดที่คล้ายกับความกว้างของอุปกรณ์
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
การแก้ไขด่วนนี้ไม่ใช่โซลูชันที่สมบูรณ์แบบ ผ่านการทำงานอย่างหนักของนักออกแบบเช่น @mathias, @cheeaun และ @jdalton ตอนนี้เรามีจาวาสคริปต์ที่สามารถเพิ่มไปยังส่วน <head> เพื่อรับวิธีแก้ปัญหาแบบถาวร ภายใต้โซลูชันนี้หน้าจะยังคงสามารถซูมได้
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>เหล่านี้เป็นโซลูชั่นที่รู้จักเท่านั้นที่นักออกแบบได้มาด้วย แต่ถ้าคุณมีอีกอันที่จะแก้ไขบั๊กนี้ให้แชร์กับเราในคอมเม้น
ความคิดเห็น