วิวพอร์ตเสมือนคืออะไร

ใน Chrome M40 มีการเปลี่ยนแปลงวิวพอร์ตที่ค่อนข้างบอบบาง แต่ควรสร้างความแตกต่างอย่างมากให้แก่ผู้ใช้

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

วิธีที่ Rick Byers อธิบายวิวพอร์ตเสมือนมีดังนี้ แนวคิดของวิวพอร์ตเสมือนคือการแยกแนวคิดของ "วิวพอร์ต" ออกเป็น 2 ส่วน ได้แก่ "วิวพอร์ตแบบเลย์เอาต์" (ที่มีการแนบรายการตำแหน่งคงที่) และ "วิวพอร์ตภาพ" (สิ่งที่ผู้ใช้เห็นจริงๆ)

ตัวอย่างง่ายๆ

ตัวอย่างที่ดีคือ videojs.com ของเว็บไซต์เพราะ Appbar อยู่ที่ด้านบนและมีลิงก์ทั้งด้านซ้ายและด้านขวาของ Appbar

รูปภาพด้านล่างแสดงสิ่งที่คุณจะเห็นเมื่อซูมเข้าบนเว็บไซต์และพยายามเลื่อนไปทางซ้ายหรือขวา

อุปกรณ์ยอดนิยมคือ Chrome M39 ซึ่งไม่มีวิวพอร์ตเสมือน และอุปกรณ์ 3 อันดับล่างสุดมาจาก Chrome M40 ซึ่งมีวิวพอร์ตเสมือน

การแสดงภาพแบบพิกเซล
การแสดงภาพแบบพิกเซล

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

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

Internet Explorer มีพฤติกรรมนี้อยู่แล้วและการเปลี่ยนแปลงเหล่านี้ ช่วยให้เรามีความใกล้ชิดมากขึ้น

html

การเปลี่ยนแปลงหลักเพียงอย่างเดียวที่มาพร้อมกับการเปลี่ยนแปลงครั้งนี้คือใน M39 คุณสามารถใช้ overflow: ซ่อนอยู่กับองค์ประกอบ html และหน้าเว็บจะยังคงเลื่อนได้อยู่ แต่ในเวอร์ชัน M40 จะไม่มีการรองรับอีกต่อไป หน้าเว็บจะไม่เลื่อน

ข้อมูลที่เสถียรมากขึ้น

คุณอยากดูข้อมูลเพิ่มเติมไหม

คุณสามารถดูชุดสไลด์ได้ที่ด้านล่าง