Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

Bramus

เผยแพร่เมื่อวันที่ 28 กุมภาพันธ์ 2025

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

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

บาร์ทุกที่

Android มาพร้อมกับแถบระบบที่ระบบปฏิบัติการมีให้

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

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

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

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

ภาพส่วนล่างของอุปกรณ์ Android ที่มีแถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสปรากฏอยู่ — แถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส *(แหล่งที่มา)*

นอกจากแถบระบบ 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 แสดงผลแบบไร้ขอบ ข้อความระบุว่า "วิวพอร์ตขยายเข้าไปในแถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส" — วิวพอร์ตขนาดใหญ่ที่แสดงใน Chrome บน Android ซึ่งไม่ได้แสดงแบบไร้ขอบ (ซ้าย) และใน Chrome ที่แสดงแบบไร้ขอบ (ขวา) ใน Chrome ที่รองรับการแสดงผลแบบไร้ขอบ พอร์ตการแสดงผลจะขยายเข้าไปในพื้นที่แถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสเมื่อแถบเครื่องมือแบบไดนามิกของ Chrome หดกลับ

ลักษณะการทำงานของ Chrome ที่ไม่มีการแสดงผลแบบไร้ขอบ

วิดีโอต่อไปนี้แสดง Chrome บน Android ที่ไม่มีการรองรับแบบไร้ขอบ โดยแถบที่อยู่ของ Chrome (ที่ด้านบน) จะเลื่อนออกไปแบบไดนามิกเมื่อเลื่อนหน้าเว็บ อย่างไรก็ตาม แถบสถานะด้านบนแบบเนทีฟของ Android และแถบนำทางแบบเนทีฟของ 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 เสมอ หรือขยายพื้นหลังให้ครอบคลุมพื้นที่ดังกล่าว

ส่วนแทรกพื้นที่ปลอดภัย

ส่วนแทรกพื้นที่ปลอดภัยคือตัวแปรสภาพแวดล้อม 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-max-inset-bottom จะแสดงค่าสูงสุดของ safe-area-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 เท่านั้นที่ต้องเปลี่ยนแปลงเมื่อคางขยับออกไป จึงไม่เกิด Layout Thrashing

ลองใช้การแสดงผลแบบไร้ขอบก่อน Chrome 135

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

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

ตรวจสอบว่าไม่ได้เปิดใช้แฟล็กต่อไปนี้

DrawNativeEdgeToEdge
EdgeToEdgeEverywhere

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

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

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