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

Bramus

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

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

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

หมายเหตุ: การเปลี่ยนแปลงใน Chrome 135 กำหนดเป้าหมายไปยังอุปกรณ์หน้าจอขนาดเล็ก ขณะนี้ Chrome ใน Android ที่ทำงานบนอุปกรณ์หน้าจอขนาดใหญ่จะยังไม่รองรับฟีเจอร์นี้ และจะได้รับการแก้ไขใน Chrome เวอร์ชันถัดไป

หมายเหตุ: ฟีเจอร์นี้จะเปิดตัวโดยใช้Chrome Variation คุณจึงอาจเห็นฟีเจอร์นี้ใน Chrome เวอร์ชันเก่า

บาร์ทุกที่

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

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

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

แถบสถานะใน Android ที่ไฮไลต์ (source)

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

แถบนำทางด้วยท่าทางสัมผัส (source)

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

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

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

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

ขนาดต่ำสุดและสูงสุดของวิวพอร์ตใน Chrome บน Android ก่อน Chrome 135 ขนาดเหล่านี้เรียกว่าวิวพอร์ตขนาดเล็กและขนาดใหญ่ วิวพอร์ตจะมีเส้นขอบสีน้ำเงินประ

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

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

หมายเหตุ: Chrome ใน iOS เพิ่มการรองรับการแสดงผลแบบเต็มหน้าจอเมื่อมีการเปิดตัว iOS 11.3 คําแนะนําในคู่มือนี้ใช้กับ Chrome ที่ทํางานบน iOS ด้วย

ลักษณะการทํางานของ 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 จะบดบังเนื้อหาเมื่อคางหายไป

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

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

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

Browser Support

• 69
• 79
• 65
• 11

Source

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

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

ภาพ 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);
}

ภาพเว็บไซต์ที่มีองค์ประกอบที่วางอยู่ด้านล่างซึ่งใช้พื้นที่ปลอดภัยด้านล่างที่ฝังไว้กับพร็อพเพอร์ตี้ 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);
}

สำคัญ: Chrome จะไม่เลื่อนแถบด้านล่างออกขณะที่คุณเลื่อนเมื่อตรวจพบรูปแบบนี้เพื่อป้องกันการถดถอยของประสิทธิภาพ

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

แต่เราขอแนะนำให้ใช้ 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));
}

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

หมายเหตุ: ระบบจะเลือกค่าสำรอง 36px สำหรับ safe-area-max-inset-bottom เพื่อรองรับเบราว์เซอร์ที่ไม่รองรับ safe-area-max-inset-bottom เราได้เลือกค่านี้เนื่องจาก Safari ใน iOS ในโหมดแท็บเดียวมีการออฟเซตด้านล่างสูงสุด 36px ในโหมดแนวตั้ง

สำคัญ: Chrome มีการเพิ่มประสิทธิภาพโค้ดหรือที่เรียกว่าเส้นทางด่วนเมื่อตรวจพบรูปแบบ calc(env(safe-area-inset-bottom, …) +/- …); เส้นทางที่เร็วนี้ช่วยให้เนื้อหาที่ยึดด้านล่างเคลื่อนไหวตามคางได้อย่างมีประสิทธิภาพขณะที่คางเคลื่อนออก

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

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

หมายเหตุ: ระยะขอบที่ปลอดภัยสูงสุด (safe-area-max-inset-bottom และเพื่อน) พร้อมใช้งานใน Chrome 135

ลองใช้การแสดงผลแบบเต็มหน้าจอก่อน 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" ขอขอบคุณสำหรับความคิดเห็นของคุณ