คู่มือการย้ายข้อมูลแบบเต็มหน้าจอใน 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

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 65.
  • Safari: 11.

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" ขอขอบคุณสำหรับความคิดเห็นของคุณ