ลักษณะการทำงานของการปรับขนาดแถบ 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