หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Bramus

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

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

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

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

องค์ประกอบสีฟ้าอ่อนที่ตั้งค่าเป็น 100vw x 100vh โดยครอบคลุมทั้งวิวพอร์ต วิวพอร์ตจะระบุโดยใช้เส้นขอบที่เป็นเส้นประสีน้ำเงิน — องค์ประกอบสีฟ้าอ่อนที่ตั้งค่าเป็น 100 vw x 100 vh โดยครอบคลุมทั้งวิวพอร์ต
ตัววิวพอร์ตเองจะมีการระบุโดยใช้ขอบเส้นประสีน้ำเงิน

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

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

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

การสนับสนุนเบราว์เซอร์

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

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

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

100vh บนมือถือสูงเกินไปสำหรับการโหลด — 100vh บนอุปกรณ์เคลื่อนที่สูงเกินไปในการโหลด

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

100vh บนอุปกรณ์เคลื่อนที่นั้น "ถูกต้อง" เมื่อมีการเพิกถอนอินเทอร์เฟซผู้ใช้ของ User Agent

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

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

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

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

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

การแสดงภาพเบราว์เซอร์ในอุปกรณ์เคลื่อนที่ 2 ภาพวางเรียงกัน รายการหนึ่งมีองค์ประกอบที่มีขนาด 100svh และอีก 100lvh — การแสดงภาพเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ 2 ภาพวางติดกัน
องค์ประกอบหนึ่งมีองค์ประกอบที่มีขนาดเป็น 100svh และอีก 100lvh

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

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

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

100dvh จะปรับตัวเองให้เป็นวิวพอร์ตขนาดใหญ่หรือเล็ก

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

การสนับสนุนเบราว์เซอร์

108
108
101
15.4

คำเตือน

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

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

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

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

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