ในเดือนพฤศจิกายนเมื่อมีการเปิดตัว 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 ใน Chrome OS
- 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 อย่าลืมใส่ "แป้นพิมพ์บนหน้าจอ" ในชื่อรายงาน