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