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