ลักษณะการปรับขนาดของแถบ URL จะเปลี่ยนไปใน Chrome บน Android ตั้งแต่เวอร์ชัน 56 เป็นต้นไป ข้อมูลที่คุณควรทราบมีดังนี้
ความยาวที่กําหนดในหน่วยวิวพอร์ต (เช่น vh) จะไม่ปรับขนาดตามการแสดงหรือซ่อนแถบ URL แต่ระบบจะปรับขนาดหน่วย vh ตามความสูงของวิวพอร์ตแทน ราวกับว่าแถบ URL ซ่อนอยู่เสมอ กล่าวคือ ระบบจะปรับขนาดหน่วย vh เป็น "วิวพอร์ตที่ใหญ่ที่สุดที่เป็นไปได้" ซึ่งหมายความว่า 100vh จะใหญ่กว่าความสูงที่มองเห็นได้เมื่อแถบ URL แสดงอยู่
บล็อกที่บรรจุข้อมูลเริ่มต้น (ICB) คือบล็อกที่บรรจุข้อมูลรูทที่ใช้เมื่อปรับขนาดองค์ประกอบตามองค์ประกอบหลัก เช่น การกำหนดสไตล์ width: 100%; height: 100%ให้กับองค์ประกอบ <html> จะทําให้องค์ประกอบมีขนาดใหญ่เท่ากับ ICB การเปลี่ยนแปลงนี้จะทำให้ ICB ไม่ปรับขนาดเมื่อแถบ URL ซ่อนอยู่
แต่แถบ URL จะยังคงมีระดับความสูงเท่าเดิม ราวกับว่าแถบ URL แสดงอยู่เสมอ ("วิวพอร์ตที่เล็กที่สุดเท่าที่จะเป็นไปได้") ซึ่งหมายความว่าองค์ประกอบที่มีขนาดเท่ากับความสูงของ ICB จะไม่ได้เต็มความสูงที่มองเห็นขณะที่แถบ URL ซ่อนอยู่
การเปลี่ยนแปลงข้างต้นมีข้อยกเว้น 1 ข้อสำหรับองค์ประกอบที่เป็นposition: fixed ลักษณะการทํางานของฟีเจอร์เหล่านี้จะยังคงเหมือนเดิม กล่าวคือ องค์ประกอบ position:
fixed ที่มีบล็อกที่บรรจุเป็น ICB จะปรับขนาดตามการปรากฏหรือซ่อนแถบ URL เช่น หากความสูงคือ 100% แถบจะเติมเต็มความสูงที่มองเห็นได้เสมอ ไม่ว่าจะแสดงแถบ URL หรือไม่ก็ตาม ในทำนองเดียวกัน ความยาว vh จะปรับขนาดให้เข้ากับความสูงที่มองเห็นโดยพิจารณาจากตําแหน่งแถบ URL ด้วย
การเปลี่ยนแปลงนี้มีสาเหตุดังนี้
หน่วย
vhที่ใช้ได้บนอุปกรณ์เคลื่อนที่ ก่อนหน้านี้ การใช้vhหน่วยทำให้หน้าเว็บจัดเรียงใหม่อย่างกระอักกระอ่วนทุกครั้งที่ผู้ใช้เปลี่ยนทิศทางการเลื่อนประสบการณ์ของผู้ใช้ที่ดีขึ้น หากหน้าเว็บจัดเรียงใหม่ขณะที่ผู้ใช้กำลังอ่านอยู่ ผู้ใช้อาจสูญเสียตำแหน่งสัมพัทธ์ในเอกสาร ซึ่งเป็นเรื่องที่น่าหงุดหงิด แต่ก็ทำให้ต้องใช้ตัวประมวลผลมากขึ้นและแบตเตอรี่หมดเร็วขึ้นเพื่อจัดเรียงและวาดหน้าเว็บใหม่
ปรับปรุงความสามารถในการทำงานร่วมกันกับ Safari ใน iOS รูปแบบใหม่นี้ควรตรงกับลักษณะการทํางานของ Safari ซึ่งจะช่วยให้นักพัฒนาเว็บทำงานได้ง่ายขึ้น ตัวเลือกที่เข้าใจยากในการทําให้หน่วย
vhเป็นวิวพอร์ตที่ใหญ่ที่สุดเท่าที่จะเป็นไปได้ แต่ทําให้ ICB เป็นวิวพอร์ตที่เล็กที่สุดเท่าที่จะเป็นไปได้มีไว้เพื่อจับคู่ลักษณะการทํางานของ Safari
สำหรับกรณีที่เป็นโหมดเต็มหน้าจอซึ่งแถบ URL ล็อกอยู่ในสถานะซ่อนอยู่ ICB จะใช้ความสูงแบบเต็มหน้าจอ ซึ่งสอดคล้องกับคําจํากัดความข้างต้น เนื่องจาก "วิวพอร์ตที่เล็กที่สุดที่เป็นไปได้" จะเป็นวิวพอร์ตแบบเต็มเนื่องจากแถบ URL จะไม่แสดงเมื่อเลื่อน
สาธิต
- ต่อไปนี้เป็นการสาธิต
แถบ 4 แถบทางด้านขวาของหน้าคือชุดค่าผสมทั้งหมดที่เป็นไปได้ของ
99%,99vh,position:fixedและposition:absoluteที่ระบุไว้ในหน้าแบบเลื่อนได้ การซ่อนแถบ URL จะแสดงผลที่การซ่อนมีต่อแต่ละรายการ ระบบจะพิมพ์เหตุการณ์การปรับขนาดที่ด้านล่างของหน้า
การสนับสนุน
- Chrome 56 บน Android