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

Bramus

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

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

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

บาร์ทุกที่

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

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

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

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

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

Chrome แสดงผลแบบขอบจรดขอบ

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

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

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

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

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

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

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

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

ขอบจรดขอบแบบไดนามิกที่มี "คาง"

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

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

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

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

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

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

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

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

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

การจัดการเนื้อหาที่อาจถูกการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสบดบัง

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

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

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

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

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

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

ระยะขอบของพื้นที่ปลอดภัย

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

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

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

สําหรับองค์ประกอบที่วางไว้ที่ด้านล่างของวิวพอร์ต ให้ใช้ 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);
}

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

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

อย่าตั้งค่า 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 เท่านั้นที่ต้องเปลี่ยนแปลงเมื่อคางเคลื่อนออกไป จึงไม่มีการสลับเลย์เอาต์

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

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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