การออกแบบเว็บที่ตอบสนอง - The Viewport
วิวพอร์ตคืออะไร?
วิวพอร์ตคือพื้นที่ที่ผู้ใช้มองเห็นได้ของหน้าเว็บ
วิวพอร์ตแตกต่างกันไปตามอุปกรณ์ และจะเล็กกว่าบนโทรศัพท์มือถือมากกว่าบนหน้าจอคอมพิวเตอร์
ก่อนหน้าแท็บเล็ตและโทรศัพท์มือถือ หน้าเว็บได้รับการออกแบบมาสำหรับหน้าจอคอมพิวเตอร์เท่านั้น และเป็นเรื่องปกติที่หน้าเว็บจะมีการออกแบบคงที่และมีขนาดคงที่
จากนั้น เมื่อเราเริ่มท่องอินเทอร์เน็ตโดยใช้แท็บเล็ตและโทรศัพท์มือถือ หน้าเว็บที่มีขนาดคงที่นั้นใหญ่เกินกว่าจะใส่วิวพอร์ตได้ ในการแก้ไขปัญหานี้ เบราว์เซอร์ในอุปกรณ์เหล่านั้นจะย่อขนาดหน้าเว็บทั้งหมดให้พอดีกับหน้าจอ
มันไม่สมบูรณ์แบบ!! แต่แก้ไขด่วน
การตั้งค่าวิวพอร์ต
HTML5 แนะนำวิธีการเพื่อให้นักออกแบบเว็บไซต์ควบคุมวิวพอร์ตผ่าน
<meta>แท็ก
คุณควรรวม<meta>องค์ประกอบวิวพอร์ตต่อไปนี้ในหน้าเว็บทั้งหมดของคุณ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ซึ่งจะให้คำแนะนำเบราว์เซอร์เกี่ยวกับวิธีการควบคุมขนาดและขนาดของหน้า
ส่วนwidth=device-widthกำหนดความกว้างของหน้าตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
ส่วนนี้initial-scale=1.0กำหนดระดับการซูมเริ่มต้นเมื่อเบราว์เซอร์โหลดหน้าเว็บเป็นครั้งแรก
ต่อไปนี้คือตัวอย่างของหน้าเว็บ ที่ ไม่มีเมตาแท็กของวิวพอร์ต และหน้าเว็บเดียวกันกับเมตาแท็กของวิวพอร์ต:
เคล็ดลับ:หากคุณกำลังเรียกดูหน้านี้ด้วยโทรศัพท์หรือแท็บเล็ต คุณสามารถคลิกลิงก์สองลิงก์ด้านบนเพื่อดูความแตกต่างได้
ปรับขนาดเนื้อหาเป็นวิวพอร์ต
ผู้ใช้ใช้เพื่อเลื่อนเว็บไซต์ในแนวตั้งทั้งบนเดสก์ท็อปและอุปกรณ์มือถือ - แต่ไม่ใช่ในแนวนอน!
ดังนั้น หากผู้ใช้ถูกบังคับให้เลื่อนในแนวนอนหรือซูมออกเพื่อดูหน้าเว็บทั้งหมด จะส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
กฎเพิ่มเติมบางประการที่ต้องปฏิบัติตาม:
1. อย่าใช้องค์ประกอบความกว้างคงที่ขนาดใหญ่ -ตัวอย่างเช่น หากรูปภาพแสดงที่ความกว้างที่กว้างกว่าวิวพอร์ต อาจทำให้วิวพอร์ตเลื่อนในแนวนอนได้ อย่าลืมปรับเนื้อหานี้ให้พอดีกับความกว้างของวิวพอร์ต
2. อย่าปล่อยให้เนื้อหาอาศัยความกว้างของวิวพอร์ตเฉพาะในการแสดงผลได้ดี - เนื่องจากขนาดและความกว้างของหน้าจอในพิกเซล CSS แตกต่างกันอย่างมากในอุปกรณ์ต่างๆ เนื้อหาจึงไม่ควรอาศัยความกว้างของวิวพอร์ตเฉพาะในการแสดงผลได้ดี
3. ใช้การสืบค้นสื่อ CSS เพื่อใช้สไตล์ที่แตกต่างกันสำหรับหน้าจอขนาดเล็กและขนาดใหญ่ - การตั้งค่าความกว้าง CSS สัมบูรณ์ขนาดใหญ่สำหรับองค์ประกอบของหน้าจะทำให้องค์ประกอบกว้างเกินไปสำหรับวิวพอร์ตบนอุปกรณ์ขนาดเล็ก ให้พิจารณาใช้ค่าความกว้างสัมพัทธ์ เช่น width: 100% แทน นอกจากนี้ ให้ระมัดระวังการใช้ค่าตำแหน่งสัมบูรณ์ที่มีขนาดใหญ่ อาจทำให้องค์ประกอบหลุดออกนอกวิวพอร์ตบนอุปกรณ์ขนาดเล็ก