ในเดือนพฤศจิกายน เมื่อมีการเปิดตัว 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 จะใช้ระบบปฏิบัติการใดอยู่ก็ตาม นอกจากนี้ยังช่วยให้หน่วยที่ขึ้นอยู่กับวิวพอร์ตแบบคงที่: การแสดงหรือซ่อน OSK จะไม่มีผลต่อหน่วยเหล่านี้
การเลือกใช้ลักษณะการทำงานอื่น
หากคุณต้องการให้เว็บไซต์ของคุณใช้ลักษณะการทำงานของการปรับขนาดก่อนปี 108 โปรดอย่ากลัว นอกจากนี้ การจัดส่งใน Chrome 108 ก็เป็นส่วนขยายของเมตาแท็กวิวพอร์ตด้วย
เมื่อใช้แป้น interactive-widget คุณจะระบุลักษณะการทำงานของการปรับขนาดให้กับ Chrome ได้ตามที่ต้องการ
ค่าที่ระบบยอมรับสำหรับ 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 และอย่าลืมใส่ "แป้นพิมพ์บนหน้าจอ" ในชื่อรายงาน