ในเดือนพฤศจิกายน Chrome จะเปิดตัว Chrome 108 และทำการเปลี่ยนแปลงบางอย่างเกี่ยวกับลักษณะการทำงานของวิวพอร์ตเลย์เอาต์เมื่อแป้นพิมพ์บนหน้าจอ (OSK) แสดงขึ้น การเปลี่ยนแปลงนี้จะทำให้ Chrome บน Android ไม่ปรับขนาดวิวพอร์ตของเลย์เอาต์อีกต่อไป แต่จะปรับขนาดเฉพาะวิวพอร์ตภาพเท่านั้น ซึ่งจะทำให้ลักษณะการทำงานของ Chrome บน Android เทียบเท่ากับ Chrome บน iOS และ Safari บน iOS
ต่อไปนี้เป็นข้อมูลเบื้องหลังเกี่ยวกับสิ่งที่เกิดขึ้น เหตุผลที่ Chrome ทำการเปลี่ยนแปลงนี้ และสิ่งที่คุณทำได้เพื่อเตรียมพร้อม
วิวพอร์ตเลย์เอาต์และวิวพอร์ตภาพ
เมื่อเข้าชมเว็บไซต์ คุณจะไม่เห็นเนื้อหาทั้งหมดของหน้าหลังจากที่โหลดแล้ว แต่เบราว์เซอร์จะแสดงวิวพอร์ตซึ่งคุณจะเห็นส่วนหนึ่งของหน้าเว็บ วิวพอร์ตนี้เรียกอีกอย่างว่าวิวพอร์ตของเลย์เอาต์ เมื่อเนื้อหาของหน้ามีขนาดใหญ่เกินไป เบราว์เซอร์จะมีกลไกการเลื่อน
เมื่อจัดตำแหน่งองค์ประกอบโดยใช้ position: fixed องค์ประกอบเหล่านี้จะจัดวางตามวิวพอร์ตของเลย์เอาต์นั้น เนื่องจากวิวพอร์ตเลย์เอาต์จะยังคงอยู่ที่เดิมเมื่อคุณเลื่อนหน้าลง องค์ประกอบที่ใช้ position: fixed ก็จะยังคงอยู่ที่เดิมด้วย
position: fixed (กล่องสีน้ำเงิน) ภาพที่แสดง (จากซ้ายไปขวา) คือ Safari บน iPhone, Chrome บน Android และ Firefox บน Android
นอกจากวิวพอร์ตของเลย์เอาต์นี้แล้ว เบราว์เซอร์ยังมีวิวพอร์ตแบบภาพด้วย ซึ่งแสดงถึงส่วนของวิวพอร์ตที่มองเห็นได้ในปัจจุบัน ที่ระดับการซูม 1 วิวพอร์ตภาพนี้จะมีขนาดใหญ่เท่ากับวิวพอร์ตของเลย์เอาต์
เมื่อบีบเพื่อซูมเข้า คุณจะลดขนาดของวิวพอร์ตภาพที่สัมพันธ์กับวิวพอร์ตเลย์เอาต์
ลักษณะการทำงานของการปรับขนาดวิวพอร์ต
เมื่อโฟกัสที่อินพุตหรือพื้นที่อื่นๆ ที่แก้ไขได้ อุปกรณ์ (ส่วนใหญ่เป็นอุปกรณ์หน้าจอสัมผัส) จะแสดงแป้นพิมพ์บนหน้าจอได้ แป้นพิมพ์นี้มักเรียกว่าแป้นพิมพ์เสมือน ซึ่งช่วยให้ผู้ใช้ป้อนเนื้อหาลงในพื้นที่ที่แก้ไขได้
เมื่อดำเนินการดังกล่าว เบราว์เซอร์จะตอบสนองด้วยวิธีใดวิธีหนึ่งต่อไปนี้ที่เกี่ยวข้องกับวิวพอร์ตต่างๆ
- ปรับขนาดเฉพาะวิวพอร์ตภาพและออฟเซ็ตวิวพอร์ตเลย์เอาต์
- ปรับขนาดทั้งวิวพอร์ตภาพและวิวพอร์ตเลย์เอาต์
- ไม่ปรับขนาดวิวพอร์ตเลย์เอาต์หรือวิวพอร์ตภาพ โดยวางแป้นพิมพ์เสมือนซ้อนทับทั้ง 2 อย่าง
ลักษณะการทำงานทั้ง 3 แบบนี้แสดงเป็นภาพได้ดังนี้
ระบบจะใช้ลักษณะการทำงานอย่างใดอย่างหนึ่งโดยขึ้นอยู่กับชุดค่าผสมของเบราว์เซอร์และระบบปฏิบัติการที่ผู้เข้าชมใช้ ซึ่งอยู่นอกเหนือการควบคุมของคุณ
การแมปพฤติกรรมการปรับขนาดต่างๆ
ในส่วนความพยายามในการตรวจสอบวิวพอร์ตของ Interop 2022 มีการตรวจสอบแง่มุมต่างๆ ที่เกี่ยวข้องกับวิวพอร์ตสำหรับเบราว์เซอร์และระบบปฏิบัติการหลักทุกชุด
ลักษณะหนึ่งที่ทดสอบคือลักษณะการปรับขนาดเมื่อแสดง OSK ซึ่งนำไปสู่การจัดประเภทต่อไปนี้
กลุ่มที่ 1
เบราว์เซอร์ที่ปรับขนาดวิวพอร์ตภาพ โดยไม่แตะต้องวิวพอร์ตเลย์เอาต์
- Safari บน iOS
- Safari บน iPadOS
- Chrome บน ChromeOS
- Chrome ใน iOS
- Chrome ใน iPadOS
- Edge ใน iOS
- Edge ใน iPadOS
กลุ่มที่ 2
เบราว์เซอร์ที่ปรับขนาดทั้งวิวพอร์ตภาพและวิวพอร์ตเลย์เอาต์
- Chrome บน Android
- Firefox บน Android
- Edge ใน Android
- Firefox บน iOS
กลุ่มที่ 3
เบราว์เซอร์ที่ไม่ปรับขนาดวิวพอร์ตเลย
- ไม่มีโดยค่าเริ่มต้น - ใน Chrome บน Android คุณสามารถเลือกใช้ลักษณะการทำงานนี้ได้โดยใช้ VirtualKeyboard API
ผลข้างเคียงของแต่ละพฤติกรรม
ความแตกต่างของวิธีปรับขนาดวิวพอร์ตต่างๆ เมื่อแสดง OSK ส่งผลให้เลย์เอาต์และลักษณะการปรับขนาดของเว็บไซต์ไม่สามารถทำงานร่วมกันได้
ในเบราว์เซอร์จากกลุ่มที่ 1 ซึ่งแสดง OSK ให้ทำดังนี้
- ค่าที่คำนวณได้สำหรับหน่วยที่สัมพันธ์กับวิวพอร์ตจะยังคงเหมือนเดิม
- องค์ประกอบที่ออกแบบมาให้ใช้พื้นที่ภาพทั้งหมดจะยังคงขนาดเดิมไว้
- องค์ประกอบที่ใช้
position: fixedจะยังคงอยู่ที่เดิมและอาจถูกบดบังโดย OSK
ในเบราว์เซอร์จากกลุ่มที่ 2 ซึ่งแสดง OSK ให้ทำดังนี้
- ค่าที่คำนวณได้สำหรับหน่วยที่สัมพันธ์กับวิวพอร์ตจะลดลง
- องค์ประกอบที่ออกแบบมาเพื่อใช้พื้นที่ภาพทั้งหมดจะหดตัวลง
- องค์ประกอบที่ใช้
position: fixedอาจไปอยู่ในตำแหน่งอื่นในเลย์เอาต์
position: fixed (กล่องสีน้ำเงิน) ภาพที่แสดงคือ Safari บน iOS (ซ้าย) และ Chrome บน Android (กลางและขวา)
คุณจะไม่ทราบว่ามีการใช้ลักษณะการทำงานใด เว้นแต่คุณจะใช้การตรวจจับ User Agent หรือใช้การเขียนสคริปต์อย่างครอบคลุม นอกจากนี้ คุณยังเปลี่ยนลักษณะการทำงานไม่ได้ เนื่องจากลักษณะการทำงานจะกำหนดโดยชุดค่าผสมของเบราว์เซอร์และระบบปฏิบัติการที่ผู้ใช้เข้าชม
การเปลี่ยนลักษณะการทำงานเริ่มต้นใน Chrome 108
ตั้งแต่ Chrome 108 เป็นต้นไป Chrome บน Android จะปรับลักษณะการทำงานในการปรับขนาดวิวพอร์ตเพื่อไม่ให้ปรับขนาดวิวพอร์ตของเลย์เอาต์อีกต่อไปเมื่อแป้นพิมพ์บนหน้าจอแสดงขึ้น
ซึ่งจะปรับลักษณะการทำงานของ Chrome บน Android ให้สอดคล้องกับ Chrome บน iOS, iPadOS, Windows และ CrOS, Safari บน iOS และ iPadOS รวมถึง Edge บน iOS, iPadOS และ Windows
การเปลี่ยนแปลงนี้ช่วยให้ผู้เขียนทราบว่าจะใช้ลักษณะการทำงานใด ไม่ว่า Chrome จะทำงานบนระบบปฏิบัติการใดก็ตาม นอกจากนี้ ยังช่วยให้หน่วยที่สัมพันธ์กับวิวพอร์ตมีความเสถียร กล่าวคือ การแสดงหรือซ่อน OSK จะไม่ส่งผลต่อหน่วยเหล่านี้
การเลือกใช้ลักษณะการทำงานอื่น
หากต้องการให้เว็บไซต์ใช้ลักษณะการปรับขนาดก่อนเวอร์ชัน 108 ก็ไม่ต้องกังวล นอกจากนี้ Chrome 108 ยังมาพร้อมส่วนขยายของเมตาแท็ก Viewportด้วย
คุณสามารถบอก Chrome ได้ว่าต้องการให้ปรับขนาดอย่างไรผ่านแป้น interactive-widget
ค่าที่ยอมรับสำหรับ interactive-widget มีดังนี้
resizes-visual: ปรับขนาดเฉพาะวิวพอร์ตภาพ แต่ไม่ปรับขนาดวิวพอร์ตเลย์เอาต์resizes-content: ปรับขนาดทั้งวิวพอร์ตภาพและวิวพอร์ตเลย์เอาต์overlays-content: อย่าปรับขนาดวิวพอร์ตใดๆ
หากต้องการเลือกกลับไปใช้ลักษณะการทำงาน "เดิม" ของ Chrome ใน Android ให้ตั้งค่าเมตาแท็ก Viewport เป็นค่าต่อไปนี้
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=r>esizes-content"
หากคุณไม่รวม interactive-widget ไว้ในเมตาแท็ก Viewport Chrome จะใช้ลักษณะการทำงานเริ่มต้น ซึ่งก็คือ resizes-visual
เมื่อแสดงเป็นภาพ การตั้งค่าจะมีผลต่อวิวพอร์ตต่างๆ ดังนี้
resizes-visual, resizes-content และ overlays-content
คุณลองดูผลลัพธ์ของแต่ละค่าในเบราว์เซอร์ได้ที่เว็บไซต์สาธิตนี้
การทดสอบและการแสดงความคิดเห็น
เราคาดว่าเว็บไซต์ที่มีอยู่จะมีความแตกต่างเล็กน้อย แต่คาดว่าสิ่งเหล่านี้จะไม่ทำให้เกิดการบล็อก เนื่องจากตอนนี้ Chrome 108 บน Android จะทำงานคล้ายกับ Safari บน iOS ดังนั้นเว็บไซต์ที่ทำงานได้ดีใน Safari บน iOS ควรทำงานได้ดีใน Chrome 108 บน Android ด้วย
อย่างไรก็ตาม เราขอแนะนำให้ผู้เขียนเว็บไซต์ทดสอบเว็บไซต์ของตนใน Chrome 108 ซึ่งอยู่ในเวอร์ชันเบต้าตั้งแต่วันที่ 27 ตุลาคม 2022 โดยเฉพาะอย่างยิ่ง ให้มองหาองค์ประกอบที่ใช้ position: fixed และ/หรือใช้หน่วยที่สัมพันธ์กับวิวพอร์ต
คุณรายงานความคิดเห็นได้ที่ crbug.com โดยอย่าลืมใส่ "แป้นพิมพ์บนหน้าจอ" ในชื่อรายงาน