ในเดือนพฤศจิกายน เมื่อมีการเปิดตัว Chrome 108 ทาง Chrome จะทำการเปลี่ยนแปลงบางอย่างกับลักษณะการทำงานของวิวพอร์ตของเลย์เอาต์เมื่อแป้นพิมพ์บนหน้าจอ (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 จะทำงานบนระบบปฏิบัติการใดก็ตาม นอกจากนี้ ยังช่วยให้มีหน่วยที่สัมพันธ์กับวิวพอร์ตที่เสถียรอีกด้วย การแสดงหรือซ่อนแป้นพิมพ์บนหน้าจอจะไม่ส่งผลต่อหน่วยเหล่านี้
เลือกใช้ลักษณะการทำงานอื่น
ไม่ต้องกังวลหากต้องการให้เว็บไซต์ใช้ลักษณะการปรับขนาดก่อนเวอร์ชัน 108 นอกจากนี้ Chrome 108 ยังมาพร้อมกับส่วนขยายของเมตาแท็ก Viewport ด้วย
คุณบอก Chrome ได้ว่าต้องการให้เปลี่ยนขนาดแบบใดผ่านคีย์ interactive-widget
ค่าที่ยอมรับสำหรับ interactive-widget คือ
resizes-visual: ปรับขนาดเฉพาะวิวพอร์ตภาพเท่านั้น โดยไม่ปรับขนาดวิวพอร์ตเลย์เอาต์resizes-content: ปรับขนาดทั้งวิวพอร์ตภาพและวิวพอร์ตเลย์เอาต์overlays-content: อย่าปรับขนาดวิวพอร์ต
หากต้องการเลือกใช้ลักษณะการทํางานของ Chrome "เวอร์ชันเก่า" ใน Android อีกครั้ง ให้ตั้งค่าเมตาแท็กวิวพอร์ตเป็นดังนี้
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
หากคุณไม่ได้ใส่ interactive-widget ในเมตาแท็กวิวพอร์ต 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 อย่าลืมใส่ "แป้นพิมพ์บนหน้าจอ" ในชื่อรายงาน