การปรับขนาดแถบ URL

David Bokan

ลักษณะการทำงานของการปรับขนาดแถบ URL จะเปลี่ยนไปใน Chrome บน Android โดยเริ่มตั้งแต่เวอร์ชัน 56 เป็นต้นไป ข้อมูลที่คุณควรทราบมีดังนี้

ความยาวที่กำหนดในหน่วยวิวพอร์ต (เช่น vh) จะไม่ปรับขนาดเพื่อตอบสนองต่อแถบ URL ที่แสดงหรือซ่อน แต่หน่วยโฆษณา vh จะมีขนาดเท่ากับความสูงของวิวพอร์ตเสมือนว่าแถบ URL ซ่อนอยู่เสมอ กล่าวคือ หน่วย vh จะมีขนาดเป็น "วิวพอร์ตที่ใหญ่ที่สุดที่เป็นไปได้" ซึ่งหมายความว่า 100vh จะใหญ่กว่าความสูงที่มองเห็นได้เมื่อแถบ URL ปรากฏขึ้น

Initial Containing Block (ICB) คือรูทที่มีการบล็อกที่ใช้เมื่อปรับขนาดองค์ประกอบที่เกี่ยวข้องกับองค์ประกอบระดับบนสุด เช่น การระบุรูปแบบ width: 100%; height: 100% ให้องค์ประกอบ <html> จะทำให้มีขนาดเท่ากับ ICB การเปลี่ยนแปลงนี้จะทำให้ ICB ไม่ปรับขนาดเมื่อแถบ URL ซ่อนอยู่ แต่จะยังมีความสูงเท่าเดิมราวกับว่าแถบ URL แสดงอยู่เสมอ ("วิวพอร์ตที่เล็กที่สุดที่เป็นไปได้") ซึ่งหมายความว่าองค์ประกอบที่มีขนาดเท่ากับความสูงของ ICB จะไม่เติมความสูงที่มองเห็นได้ทั้งหมดขณะที่แถบ URL ซ่อนอยู่

การเปลี่ยนแปลงข้างต้นมีข้อยกเว้น 1 รายการสำหรับองค์ประกอบที่เป็น position: fixed โดยลักษณะการทำงานจะไม่เปลี่ยนแปลง นั่นคือ องค์ประกอบ position: fixed ที่มี ICB เป็นองค์ประกอบจะมีการปรับขนาดเพื่อตอบสนองต่อแถบ URL ที่แสดงหรือซ่อนอยู่ ตัวอย่างเช่น หากความสูงคือ 100% ค่าจะได้รับการเติมตามความสูงที่มองเห็นได้เสมอ ไม่ว่าแถบ URL จะแสดงหรือไม่ก็ตาม ในทำนองเดียวกัน ความยาว vh ก็จะมีการปรับขนาดให้ตรงกับความสูงที่มองเห็นได้โดยพิจารณาตำแหน่งของแถบ URL ด้วย

การเปลี่ยนแปลงนี้มีสาเหตุดังต่อไปนี้

  • หน่วยที่ใช้ได้ vh หน่วยบนอุปกรณ์เคลื่อนที่ ก่อนหน้านี้ การใช้หน่วย vh จะทำให้หน้าเว็บมีการจัดเรียงใหม่อย่างน่าตกใจทุกครั้งที่ผู้ใช้เปลี่ยนวิธีการเลื่อน

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

  • ปรับปรุงความสามารถในการทำงานร่วมกับ Safari บน iOS โมเดลใหม่นี้ควรสอดคล้องกับลักษณะการทำงานของ Safari ซึ่งช่วยให้นักพัฒนาเว็บทำงานได้ง่ายขึ้น ตัวเลือกที่ไม่ซับซ้อนเพื่อทำให้หน่วย vh เป็นวิวพอร์ตที่ใหญ่ที่สุดเท่าที่จะเป็นไปได้ แต่ ICB มีขนาดเล็กที่สุดที่เป็นไปได้คือการจับคู่ลักษณะการทำงานของ Safari

สำหรับสถานการณ์แบบเต็มหน้าจอที่แถบ URL ล็อกเป็นสถานะซ่อนอยู่ ICC จะใช้ความสูงเต็มหน้าจอ ซึ่งสอดคล้องกับคําจํากัดความข้างต้นเนื่องจาก "วิวพอร์ตที่เล็กที่สุดที่เป็นไปได้" จะเป็นวิวพอร์ตแบบเต็มเนื่องจากแถบ URL จะไม่แสดงในการเลื่อน

เดโม

  • ดูการสาธิต แถบ 4 แถบที่ด้านขวาของหน้าเป็นชุดค่าผสมของ 99%, 99vh, position:fixed และ position:absolute ที่เป็นไปได้ทั้งหมดในหน้าแบบเลื่อนได้ การซ่อนแถบ URL จะแสดงผลกระทบของแต่ละแถบ เหตุการณ์การปรับขนาด จะพิมพ์อยู่ในหน้า

การสนับสนุน

  • Chrome 56 ใน Android