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