หน่วยวิวพอร์ตขนาดใหญ่ เล็ก และแบบไดนามิก

หน่วย CSS ใหม่ที่คำนึงถึงวิวพอร์ตบนอุปกรณ์เคลื่อนที่ด้วยแถบเครื่องมือแบบไดนามิก

Bramus

วิวพอร์ตและหน่วย

หากต้องการปรับขนาดบางอย่างให้สูงพอๆ กับวิวพอร์ต คุณสามารถใช้หน่วย vw และ vh

• vw = 1% ของความกว้างของขนาดวิวพอร์ต
• vh = 1% ของความสูงของขนาดวิวพอร์ต

กำหนดความกว้าง 100vw และความสูง 100vh ให้องค์ประกอบเพื่อให้องค์ประกอบนี้ครอบคลุมวิวพอร์ตทั้งหมด

หน่วย vw และ vh เข้าสู่เบราว์เซอร์ที่มีหน่วยเพิ่มเติมเหล่านี้

• vi = 1% ของขนาดของแกนในบรรทัดของวิวพอร์ต
• vb = 1% ของขนาดแกนบล็อกของวิวพอร์ต
• vmin = จำนวนที่น้อยกว่าของ vw หรือ vh
• vmax = จำนวนที่มากกว่าของ vw หรือ vh

หน่วยเหล่านี้สนับสนุนเบราว์เซอร์ที่ดี

ความต้องการหน่วยวิวพอร์ตใหม่

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

แม้ว่าขนาดวิวพอร์ตจะเปลี่ยนแปลงได้ แต่ขนาด vw และ vh จะไม่เปลี่ยนแปลง ดังนั้นองค์ประกอบที่มีขนาดสูง 100vh จะหลุดออกจากวิวพอร์ต

เมื่อเลื่อนลง แถบเครื่องมือแบบไดนามิกจะถอนกลับ ในสถานะนี้ องค์ประกอบที่มีขนาดสูง 100vh จะครอบคลุมวิวพอร์ตทั้งหมด

เพื่อแก้ไขปัญหานี้ เราจึงได้ระบุสถานะต่างๆ ของวิวพอร์ตไว้ที่คณะทำงานของ CSS

• วิวพอร์ตขนาดใหญ่: ขนาดวิวพอร์ตที่ถือว่าอินเทอร์เฟซ UA ที่ถูกขยายและถอนกลับแบบไดนามิก
• วิวพอร์ตขนาดเล็ก: วิวพอร์ตมีขนาดเท่ากับอินเทอร์เฟซ UA ที่มีการขยายและเพิกถอนแบบไดนามิกเพื่อขยาย

นอกจากนี้ วิวพอร์ตใหม่ยังกำหนดหน่วยดังต่อไปนี้ด้วย

• หน่วยที่แสดงถึงวิวพอร์ตขนาดใหญ่จะมีคำนำหน้า lv หน่วยต่างๆ ได้แก่ lvw, lvh, lvi, lvb, lvmin และ lvmax
• หน่วยที่แสดงถึงวิวพอร์ตขนาดเล็กจะมีคำนำหน้า sv หน่วยต่างๆ ได้แก่ svw, svh, svi, svb, svmin และ svmax

ขนาดของหน่วยเปอร์เซ็นต์วิวพอร์ตเหล่านี้จะคงที่ (และทำให้มีความเสถียร) เว้นแต่จะมีการปรับขนาดวิวพอร์ตเอง

นอกจากวิวพอร์ตขนาดใหญ่และเล็กแล้ว ยังมีวิวพอร์ตแบบไดนามิกที่มีการพิจารณา UI ของ UA แบบไดนามิก ดังนี้

• เมื่อขยายแถบเครื่องมือแบบไดนามิก วิวพอร์ตแบบไดนามิกจะเท่ากับขนาดของวิวพอร์ตขนาดเล็ก
• เมื่อเพิกถอนแถบเครื่องมือแบบไดนามิก วิวพอร์ตแบบไดนามิกจะเท่ากับขนาดของวิวพอร์ตขนาดใหญ่

โดยหน่วยที่มาพร้อมกันจะมี dv นำหน้า ได้แก่ dvw, dvh, dvi, dvb, dvmin และ dvmax ขนาดของอุปกรณ์จะบีบระหว่าง lv* ถึง sv* แบบ

เครื่องเหล่านี้จะจัดส่งใน Chrome 108 โดยจะเข้าร่วม Safari และ Firefox ที่รองรับอยู่แล้ว

คำเตือน

มีข้อควรระวัง 2-3 ข้อที่ควรทราบเกี่ยวกับหน่วยวิวพอร์ต

• ไม่มีหน่วยวิวพอร์ตใดที่ระบุขนาดของแถบเลื่อน ในระบบที่เปิดใช้แถบเลื่อนแบบคลาสสิก องค์ประกอบที่มีขนาด 100vw จะกว้างเกินไป ซึ่งเป็นไปตามข้อกำหนด

• ค่าสำหรับวิวพอร์ตแบบไดนามิกจะไม่อัปเดตที่ 60 FPS ในทุกเบราว์เซอร์ที่อัปเดตจะถูกควบคุมเมื่อ UI ของ UA ขยายหรือเพิกถอน บางเบราว์เซอร์อาจอัปเดตการดีเด้งออกทั้งหมดโดยขึ้นอยู่กับท่าทางสัมผัส (การเลื่อนอย่างช้าๆ หรือการปัด) ที่ใช้

• แป้นพิมพ์บนหน้าจอ (หรือที่เรียกว่าแป้นพิมพ์เสมือน) ไม่ถือว่าเป็นส่วนหนึ่งของ UI ของ UA ดังนั้นจึงไม่ส่งผลต่อขนาดของหน่วยวิวพอร์ต ใน Chrome คุณจะเลือกใช้ลักษณะการทำงานที่การปรากฏของแป้นพิมพ์เสมือนส่งผลต่อหน่วยวิวพอร์ตได้

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิวพอร์ตและหน่วยเหล่านี้ได้ที่ตอนนี้ของ HTTP 203 ในข้อความ Bramus จะบอก Jake ทุกอย่างเกี่ยวกับวิวพอร์ตต่างๆ และอธิบายวิธีการกำหนดขนาดของหน่วยเหล่านี้

สื่อสำหรับอ่านเพิ่มเติม:

• ค่า CSS 4 ข้อกำหนด: ความยาวที่สัมพันธ์กับวิวพอร์ต
• รายการ ChromeStatus
• คำอธิบายวิวพอร์ตของเลย์เอาต์
• คำอธิบายหน่วยวิวพอร์ต

ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่