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

คู่มือการย้ายข้อมูลแบบเต็มหน้าจอใน Chrome บน Android

Bramus

เผยแพร่: 28 ก.พ. 2025

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

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

บาร์ทุกที่

Android มาพร้อมกับแถบระบบที่ระบบปฏิบัติการจัดเตรียมไว้ให้

แถบสถานะ แถบคำบรรยาย และแถบนําทางรวมเรียกว่าแถบระบบ โดยแสดงข้อมูลสำคัญ เช่น ระดับแบตเตอรี่ เวลา และการแจ้งเตือน รวมถึงให้การควบคุมอุปกรณ์โดยตรงจากทุกที่

ที่ด้านบนของหน้าจอ คุณจะเห็นแถบสถานะซึ่งมีไอคอนการแจ้งเตือนและไอคอนระบบ

ภาพส่วนบนของอุปกรณ์ Android ที่ไฮไลต์แถบระบบ — แถบสถานะใน Android ที่ไฮไลต์ *(source)*

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

ภาพส่วนล่างของอุปกรณ์ Android ที่แสดงแถบนําทางด้วยท่าทางสัมผัส — แถบนำทางด้วยท่าทางสัมผัส *(source)*

นอกจากแถบระบบของ Android แล้ว Chrome ยังมีแถบที่อยู่ที่จะขยายและหดกลับแบบไดนามิกขณะที่คุณเลื่อน

Chrome แสดงผลแบบเต็มหน้าจอ

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

ใน Chrome บน Android ก่อน Chrome เวอร์ชัน 135 วิวพอร์ตเลย์เอาต์จะวาดระหว่างแถบสถานะด้านบนกับแถบนําทางด้วยท่าทางสัมผัสด้านล่าง การมีแถบที่อยู่ของ Chrome (หรือไม่มี) อาจส่งผลต่อขนาดของวิวพอร์ต แต่วิวพอร์ตจะไม่ขยายไปยังแถบระบบด้านบนหรือแถบนําทางด้วยท่าทางสัมผัสด้านล่าง

ภาพอุปกรณ์ Android ที่มี Chrome ใน Android ที่ไม่ได้เต็มหน้าจอ ภาพทางด้านซ้ายแสดง Chrome ที่มีแถบที่อยู่ขยายอยู่ กล่องที่ไฮไลต์ด้วยสีเขียวขนาด 100svh จะอยู่ระหว่างแถบที่อยู่และแถบนําทางด้วยท่าทางสัมผัส ภาพทางด้านขวาแสดง Chrome ที่มีแถบที่อยู่หดกลับ กล่องที่ไฮไลต์ด้วยสีเขียวขนาด 100lvh จะอยู่ระหว่างแถบสถานะและแถบนําทางด้วยท่าทางสัมผัส วิวพอร์ตจะมีเส้นขอบสีน้ำเงินประจุด — ขนาดต่ำสุดและสูงสุดของวิวพอร์ตใน Chrome บน Android ก่อน Chrome 135 ขนาดเหล่านี้เรียกว่าวิวพอร์ตขนาดเล็กและขนาดใหญ่ วิวพอร์ตจะมีเส้นขอบสีน้ำเงินประ

ตั้งแต่ Chrome 135 เป็นต้นไป วิวพอร์ตจะขยายเข้าไปในแถบนําทางด้วยท่าทางสัมผัสของ Android ได้ ลักษณะการทำงานนี้เรียกว่าแบบไร้ขอบ

ภาพวิวพอร์ตใน Chrome บน Android ที่ไม่ได้เต็มหน้าจอ (ด้านซ้าย) และใน Chrome บน Android ที่เต็มหน้าจอ (ด้านขวา) ภาพแต่ละภาพจะมีกล่องสีน้ำเงินที่แสดงถึงองค์ประกอบที่มีขนาดความสูง 100vh ข้อความทางด้านซ้ายจะอธิบายสิ่งที่จะเกิดขึ้นเมื่อขอบจอไม่ติดขอบ ซึ่งจะระบุว่า "วิวพอร์ตยังคงถูกบีบอัดระหว่างแถบสถานะด้านบนกับแถบนําทางด้วยท่าทางสัมผัสด้านล่าง" ข้อความทางด้านขวาจะอธิบายสิ่งที่จะเกิดขึ้นเมื่อ Chrome อยู่เต็มหน้าจอ ข้อความจะระบุว่า "วิวพอร์ตขยายเข้าไปในแถบนําทางด้วยท่าทางสัมผัส" — วิวพอร์ตขนาดใหญ่ที่แสดงใน Chrome บน Android ซึ่งไม่ได้เต็มหน้าจอ (ซ้าย) และใน Chrome ที่เต็มหน้าจอ (ขวา) ใน Chrome ที่รองรับการแสดงผลแบบเต็มหน้าจอ วิดเจ็ตจะขยายไปยังพื้นที่แถบนำทางด้วยท่าทางสัมผัสเมื่อแถบเครื่องมือแบบไดนามิกของ Chrome ยุบ

ลักษณะการทํางานของ Chrome ที่ไม่เป็นแบบไร้ขอบ

การบันทึกต่อไปนี้แสดง Chrome ใน Android ที่ไม่รองรับการแสดงผลแบบเต็มหน้าจอ แถบที่อยู่ของ Chrome (ที่ด้านบน) จะเลื่อนออกอย่างเป็นพลวัตเมื่อมีการเลื่อนหน้าเว็บ อย่างไรก็ตาม แถบสถานะด้านบนและแถบนําทางด้านล่างของ Android จะยังคงอยู่เหมือนเดิม

ลักษณะการทำงานแบบเก่า: Chrome ใน Android ที่ไม่รองรับการแสดงผลแบบเต็มหน้าจอและโหลด https://developer.chrome.com/

ในกรณีนี้ ขนาดของวิวพอร์ตเลย์เอาต์จะเปลี่ยนแปลงเมื่อแถบที่อยู่ของ Chrome ยุบหรือขยายออก

ลักษณะการทํางานของ Chrome แบบไร้ขอบ

ตั้งแต่ Chrome 135 เป็นต้นไป Chrome สามารถวาดเนื้อหาเว็บจนถึงขอบด้านล่างของอุปกรณ์โดยการขยายวิวพอร์ตไปยังพื้นที่แถบการนำทางด้วยท่าทางสัมผัส

แบบเต็มหน้าจอแบบไดนามิกที่มี "คาง"

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

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

ลักษณะการทำงานใหม่: Chrome ใน Android ที่รองรับการแสดงผลแบบเต็มหน้าจอและโหลด https://developer.chrome.com/ สังเกตว่าส่วนคางด้านล่างเลื่อนออกไปเมื่อเลื่อนหน้าเว็บ

ลักษณะการทำงานนี้ของแถบที่อยู่เป็นลักษณะการทำงานเริ่มต้นใหม่ของ Chrome ตั้งแต่ Chrome 135 เป็นต้นไป

แสดงแบบเต็มหน้าจอโดยค่าเริ่มต้นด้วยการเลือกใช้

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

ลักษณะการทำงานแบบใหม่เมื่อเลือกใช้แบบไร้ขอบ: วิวพอร์ตจะขยายไปถึงขอบด้านล่างเมื่อโหลดหน้าเว็บ ไม่มีคาง

หน้าเว็บสามารถระบุว่ารองรับการแสดงผลแบบเต็มหน้าจอได้โดยใช้เมตาแท็ก viewport และคีย์ viewport-fit

หากต้องการเลือกใช้แบบเต็มหน้าจอ ให้ตั้งค่า viewport-fit เป็นค่า cover

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าต่างๆ ของ viewport-fit ใน MDN

การจัดการกับเนื้อหาที่อาจถูกบดบังโดยแถบนําทางด้วยท่าทางสัมผัส

ในโหมดเต็มหน้าจอ คุณควรพิจารณาเนื้อหาที่อาจถูกบดบังโดยแถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส

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

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

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

เมื่อคางปรากฏขึ้น ผู้ใช้จะเข้าถึงเนื้อหาได้ในช่วงแรก แต่แถบนําทางของ Android จะบดบังเนื้อหาเมื่อคางหายไป

ภาพอุปกรณ์ Android ที่มี Chrome ใน Android แบบเต็มหน้าจอ ภาพด้านซ้ายแสดง Chrome ที่มองเห็นคาง เนื้อหาที่ยึดด้านล่าง (แสดงเป็นสีแดง) จะวางอยู่ด้านบน ภาพด้านขวาแสดง Chrome โดยไม่เห็นคาง เนื้อหาที่ปักหมุดด้านล่างจะวางอยู่ตรงขอบด้านล่างของอุปกรณ์ ข้อความที่แสดงอยู่ด้วยจะชี้แจงว่าตอนนี้เนื้อหาที่วางอยู่ด้านล่างถูกบดบังด้วยแถบนําทางด้วยท่าทางสัมผัส — ภาพเว็บไซต์ที่มีองค์ประกอบที่วางไว้ที่ด้านล่างซึ่งมี "bottom: 0" เมื่อเห็นส่วนคาง องค์ประกอบที่วางไว้ที่ด้านล่างจะวางอยู่เหนือแถบนําทางของ Android เมื่อคางเลื่อนออกไป องค์ประกอบจะวางอยู่หลังแถบนําทางของ Android ซึ่งบดบังองค์ประกอบนั้นบางส่วน ณ จุดนั้น

วิธีแก้ไขคือใช้ส่วนตัดของพื้นที่ปลอดภัยเพื่อวางองค์ประกอบที่ได้รับผลกระทบไว้เหนือแถบนำทางด้วยท่าทางสัมผัสด้านล่างของ Android เสมอ หรือให้พื้นหลังขององค์ประกอบนั้นขยายเข้าไปในบริเวณดังกล่าว

ส่วนที่เป็นพื้นที่ปลอดภัย

Browser Support

Source

ส่วนตัดของพื้นที่ปลอดภัยคือตัวแปรสภาพแวดล้อม 4 รายการที่กําหนดสี่เหลี่ยมผืนผ้าตามส่วนตัดด้านบน ขวา ล่าง และซ้ายจากขอบของวิวพอร์ต

ค่าทั้ง 4 รายการนี้รวมกันเป็นสี่เหลี่ยมผืนผ้าของพื้นที่ปลอดภัยที่วางเนื้อหาได้อย่างปลอดภัยเพื่อไม่ให้ถูกบดบังโดยสิ่งต่างๆ เช่น แถบนําทางด้วยท่าทางสัมผัสของ Android

ภาพอุปกรณ์ Android ที่มี Chrome ในโหมดเต็มหน้าจอ คางมีมุมมองแบบเลื่อนออก รูปสี่เหลี่ยมผืนผ้าที่ปลอดภัยซึ่งทาสีเหลืองจะแสดงใน Chrome ขอบด้านล่างอยู่เหนือแถบนำทางด้วยท่าทางสัมผัส ส่วนด้านล่างของวิวพอร์ตที่วาดเป็นสีน้ำเงินในแถบการนำทางด้วยท่าทางสัมผัส ข้อความที่แสดงอยู่ระบุว่าสี่เหลี่ยมผืนผ้าของพื้นที่ปลอดภัยจะฝังอยู่ในวิวพอร์ตโดย safe-area-bottom-inset ซึ่งจะป้องกันไม่ให้เนื้อหาแสดงใต้แถบนําทางด้วยท่าทางสัมผัส — ภาพ Chrome ในโหมดเต็มหน้าจอที่มีวิวพอร์ตและสี่เหลี่ยมผืนผ้าของพื้นที่ปลอดภัยที่ทาสีเหลือง เนื่องจากมีการหดเคี้ยวลง ส่วนที่ตัดออกด้านล่างของพื้นที่ปลอดภัยจึงป้องกันไม่ให้สี่เหลี่ยมผืนผ้าของพื้นที่ปลอดภัยไปอยู่ในแถบนําทางด้วยท่าทางสัมผัส คุณจึงเห็นวิดเจ็ตแสดงตัวอย่างหน้าเว็บจากใต้แถบการนำทางด้วยท่าทางสัมผัสนั้น

การใช้ส่วนตัดด้านล่างของพื้นที่ปลอดภัย

สําหรับองค์ประกอบที่วางอยู่ที่ด้านล่างของวิวพอร์ต ให้ใช้ safe-area-inset-bottom เป็นค่าสําหรับพร็อพเพอร์ตี้ bottom เพื่อป้องกันไม่ให้องค์ประกอบอยู่ใต้แถบนําทางด้วยท่าทางสัมผัส ค่าที่ safe-area-inset-bottom แสดงจะอัปเดตแบบไดนามิกเมื่อคางออกจากทาง ซึ่งจะทำให้องค์ประกอบที่วางอยู่ด้านล่างอยู่เหนือแถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสของ Android ได้อย่างลงตัว

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

ภาพอุปกรณ์ Android ที่มี Chrome ในโหมดเต็มหน้าจอ ในการแสดงภาพทางด้านซ้าย คุณจะเห็นคาง และเนื้อหาที่ยึดด้านล่างอยู่เหนือคาง ในการแสดงภาพทางด้านขวา ไม่เห็นคาง และเนื้อหาที่ยึดด้านล่างอยู่ในตําแหน่งเดียวกับภาพทางด้านซ้าย ซึ่งจะทำให้เนื้อหาปกติปรากฏอยู่ใต้แถบนำทางด้วยท่าทางสัมผัส — ภาพเว็บไซต์ที่มีองค์ประกอบที่วางอยู่ด้านล่างซึ่งใช้พื้นที่ปลอดภัยด้านล่างที่ฝังไว้กับพร็อพเพอร์ตี้ `bottom` เมื่อเห็นคาง แถบจะวางอยู่เหนือแถบการนำทางด้วยท่าทางสัมผัสของ Android เมื่อคางหายไป องค์ประกอบก็จะอยู่เหนือคางด้วย

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

วิธีที่ใช้กันโดยทั่วไปเพื่อป้องกันไม่ให้เนื้อหาแสดงอยู่ใต้เนื้อหาที่ยึดด้านล่างคือการตั้งค่า padding-bottom เป็น safe-area-inset-bottom วิธีนี้จะทำให้องค์ประกอบที่ยึดด้านล่างขยายขึ้นโดยอัตโนมัติเมื่อคางซ่อนตัว แม้ว่าวิธีนี้จะได้ผล แต่เราไม่แนะนำให้ใช้เนื่องจากจะส่งผลให้เกิดการย้ายองค์ประกอบในเลย์เอาต์ขณะที่คางขยับออก

อย่าตั้งค่า padding เป็นค่า safe-area-inset

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}

การใช้ส่วนเกินด้านล่างของพื้นที่ปลอดภัยและส่วนเกินสูงสุดด้านล่างของพื้นที่ปลอดภัย

แต่เราขอแนะนำให้ใช้ safe-area-inset-bottom และ safe-area-max-inset-bottom ร่วมกัน ซึ่งแตกต่างจาก safe-area-inset-bottom แบบไดนามิกที่อัปเดตแบบไดนามิกเมื่อคางออกจากทาง แต่ safe-area-max-inset-bottom จะแสดงค่าสูงสุดของ safe-area-inset-bottom

ใช้ safe-area-max-inset-bottom นี้เพื่อขยายองค์ประกอบที่ยึดด้านล่างไปข้างหน้า และรวมเข้ากับ safe-area-inset-bottom เพื่อดึงองค์ประกอบลงเพื่อให้อยู่หลังคาง

ใช้ safe-area-max-inset-bottom ร่วมกับ safe-area-inset-bottom

:root {
  --safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
  --bottom-bar-height: 50px;
}

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  height: var(--bottom-bar-height);
  padding-bottom: var(--safe-area-max-inset-bottom);
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}

body {
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}

ลองใช้เดโมเวอร์ชันสด

ผลลัพธ์ภาพจะเหมือนกับแนวทาง padding-bottom: env(safe-area-inset-bottom, 0px); แต่มีประสิทธิภาพดีกว่ามาก เนื่องจากมีเพียงค่าที่คำนวณแล้วของ bottom เท่านั้นที่ต้องเปลี่ยนแปลงเมื่อคางขยับออก จึงไม่มีการสับเปลี่ยนเลย์เอาต์

ภาพอุปกรณ์ Android ที่มี Chrome ในโหมดเต็มหน้าจอ ในการแสดงภาพทางด้านซ้าย คุณจะเห็นคาง และเนื้อหาที่ยึดด้านล่างอยู่เหนือคาง ในภาพทางด้านขวา คุณจะไม่เห็นคาง และเนื้อหาที่ยึดที่ด้านล่างจะขยายขึ้นเพื่อกินพื้นที่เดิมของคาง ซึ่งจะทำให้เกิดเอฟเฟกต์ภาพที่สวยงามและป้องกันไม่ให้เนื้อหาหน้าเว็บปกติปรากฏขึ้นจากใต้พื้นที่แถบการนำทางด้วยท่าทางสัมผัส — ภาพเว็บไซต์ที่มีองค์ประกอบที่ยึดด้านล่างซึ่งคำนึงถึงส่วนที่แทรกของพื้นที่ปลอดภัย เมื่อเห็นคาง (ซ้าย) องค์ประกอบจะวางอยู่เหนือคาง เมื่อไม่เห็นคาง องค์ประกอบจะซ้อนทับกับแถบนําทางด้วยท่าทางสัมผัสของ Android

ลองใช้การแสดงผลแบบเต็มหน้าจอก่อน Chrome 135

หากต้องการลองใช้การแสดงผลแบบเต็มหน้าจอก่อนเปิดตัวเวอร์ชันเสถียรแบบสาธารณะ คุณต้องเปิดใช้Flag ฟีเจอร์ของ Chrome หลายรายการผ่าน chrome://flags

EdgeToEdgeBottomChin (ตั้งค่าเป็น "เปิดใช้การแก้ไขข้อบกพร่อง" (ไม่บังคับ) จะเปลี่ยนสีครึ่งหนึ่งของคางเป็นสีชมพูเพื่อให้แยกความแตกต่างจาก UI อื่นๆ ได้ชัดเจนยิ่งขึ้น)
DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor (อย่าตั้งค่าเป็น "เปิดใช้" แต่ให้ตั้งค่าเป็น "เปิดใช้ Dispatch yOffset")
DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint (อย่าตั้งค่าเป็น "เปิดใช้" แต่ให้ตั้งค่าเป็น "เปิดใช้รูปแบบที่เลื่อนได้")

ตรวจสอบว่าไม่ได้เปิดใช้ Flag ต่อไปนี้

DrawNativeEdgeToEdge
EdgeToEdgeEverywhere

รีสตาร์ท Chrome 2 ครั้ง

เราต้องการรับฟังความคิดเห็นจากคุณ

หากมีความคิดเห็นเกี่ยวกับ Chrome และการใช้งานแบบเต็มหน้าจอ โปรดติดต่อเราโดยรายงานข้อบกพร่อง Chromium ในคอมโพเนนต์ "UI > Browser > Mobile > EdgeToEdge" ขอขอบคุณสำหรับความคิดเห็นของคุณ