ฉันมีปัญหาในการค้นหาเอกสารสำหรับสิ่งนี้ Safari นั้นเฉพาะเจาะจงหรือไม่?
มีข้อผิดพลาดเมื่อเร็ว ๆ นี้ใน iOS 9 ( ที่นี่ ) วิธีการแก้ปัญหาซึ่งเป็นการเพิ่มshrink-to-fit=noไปยังเมตาวิวพอร์ต
รหัสนี้ทำอะไร?
แอตทริบิวต์ meta viewport ที่ย่อขนาดลงไปทำอะไร
คำตอบ:
มันเป็น Safari ที่เฉพาะเจาะจงอย่างน้อยในเวลาที่เขียนถูกนำมาใช้ใน Safari 9.0 จาก "มีอะไรใหม่ใน Safari" เอกสารประกอบสำหรับ Safari 9.0 :
การเปลี่ยนแปลงวิวพอร์ต
การใช้เมตาแท็ก
"width=device-width"ของวิวพอร์ตทำให้หน้าเว็บย่อขนาดลงเพื่อให้พอดีกับเนื้อหาที่เกินขอบเขตวิวพอร์ต คุณสามารถแทนที่พฤติกรรมนี้ได้โดยเพิ่ม"shrink-to-fit=no"เมตาแท็กของคุณตามที่แสดงด้านล่าง ค่าที่เพิ่มจะป้องกันไม่ให้หน้าปรับขนาดให้พอดีกับวิวพอร์ต
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
กล่าวโดยสรุปคือการเพิ่มสิ่งนี้ไปยังเมตาแท็กของวิวพอร์ตคืนค่าการทำงานล่วงหน้าของ Safari 9.0
ตัวอย่าง
นี่คือตัวอย่างภาพที่ใช้งานได้ซึ่งแสดงความแตกต่างเมื่อโหลดหน้าเว็บในการกำหนดค่าสองแบบ
ส่วนสีแดงคือความกว้างของวิวพอร์ตและส่วนสีฟ้านั้นอยู่นอกวิวพอร์ตเริ่มต้น (เช่นleft: 100vw) โปรดทราบว่าในตัวอย่างแรกหน้าจะถูกย่อให้พอดีเมื่อshrink-to-fit=noไม่แสดง (จึงแสดงเนื้อหาที่ไม่อยู่ในช่องมองภาพ) และเนื้อหาสีน้ำเงินยังคงปิดหน้าจอในตัวอย่างหลัง
สำหรับตัวอย่างนี้สามารถพบได้ที่https://codepen.io/davidjb/pen/ENGqpv
ไม่ระบุการย่อขนาดให้พอดี
ด้วยการลดขนาดให้พอดี = ไม่
2
ฉันขอโทษ แต่ฉันก็ยังไม่เข้าใจว่ารหัสนั้นทำอะไร คุณช่วยอธิบายด้วยวิธีอื่นได้ไหม? ขอบคุณ!
—
Daniel Springer
@Dani ตามค่าเริ่มต้น Safari จะซูมหน้าออกเพื่อให้พอดีกับเนื้อหาใด ๆ ที่เกินจำนวนวิวพอร์ต (ตัวอย่างแรกแสดงพื้นที่สีน้ำเงินที่มองเห็นได้ การระบุ
—
davidjb
shrink-to-fit=noป้องกันพฤติกรรมนี้โดยปล่อยให้ระดับการซูมเพียงอย่างเดียวและปล่อยให้เนื้อหาล้นออกจากหน้าจอ ลองตัวอย่าง Codepen บน iDevice (หรือ iOS Simulator) ของคุณแล้วลองเปลี่ยนการตั้งค่า บางทีการเห็นการเปลี่ยนแปลงแบบโต้ตอบจะช่วยได้
ฉันเข้าใจแล้ว แต่ทำไมบางคนต้องการให้เนื้อหาบางส่วนซ่อนอยู่ในหน้าจอขนาดเล็ก
—
Daniel Springer
@Dani เหตุผลที่หลากหลาย แต่ตัวอย่างรวดเร็วคือตัวเลื่อน / ภาพหมุนที่วางเนื้อหานอกวิวพอร์ตหรือเนื้อหาที่ไม่ตอบสนองที่มีขนาดใหญ่ (เช่นรูปภาพ / ตาราง) ที่อาจล้นและทำให้หน้าเว็บเล็ก ๆ เป็นค่าเริ่มต้น
—
davidjb
shrink-to-fitพฤติกรรม. ด้วยshrink-to-fit=noหน้านั้นยังคงอยู่ในขนาดที่คาดหวังทำให้เนื้อหาล้นพอร์ตวิวพอร์ต ผู้ใช้สามารถ (โดยทั่วไป) ยังคงเลื่อนหรือย่อเพื่อดูเนื้อหาล้น แต่วิวพอร์ตเริ่มต้นตรงกับขนาดของอุปกรณ์
@davidjb ฉันคิดว่าสิ่งนี้ได้รับการแก้ไขด้วย iOS 11 ล่าสุดฉันไม่สามารถทำซ้ำข้อบกพร่องนี้ได้
—
Zeel Shah
ตามสถิติการใช้งาน iOS แสดงว่าการใช้งาน iOS 9.0-9.2.x ปัจจุบันอยู่ที่ 0.17% หากตัวเลขเหล่านี้บ่งบอกถึงการใช้งานทั่วโลกอย่างแท้จริงของเวอร์ชันเหล่านี้แสดงว่ามีความเป็นไปได้ที่จะลบการย่อขนาดให้พอดีจากเมตาแท็กวิวพอร์ตของคุณ
หลังจาก 9.2.x IOS ลบแท็กนี้ไปที่เบราว์เซอร์ของมัน
คุณสามารถตรวจสอบหน้านี้https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html