การออกแบบเว็บไซต์ที่ตอบสนองได้ - โฉมมุมมอง

อะไรคือ viewport?

viewport (viewport) คือพื้นที่ที่ผู้ใช้สามารถเห็นในหน้าเว็บ

viewport ของอุปกรณ์แตกต่างกัน มันจะเล็กกว่าบนโทรศัพท์มือถือเมื่อเทียบกับหน้าจอคอมพิวเตอร์

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

แล้ว เมื่อเราเริ่มใช้เครื่องพลังงานและโทรศัพท์มือถือเพื่อตรวจสอบอินเทอร์เน็ต หน้าเว็บขนาดตัวที่ไม่เปลี่ยนแปลงมันเร็วๆแล้วก็มีขนาดใหญ่เกินไปและไม่สามารถรัดเรียบให้เข้ากับ viewport ในอุปกรณ์เหล่านั้น เพื่อแก้ปัญหานี้ บราวเซอร์บนอุปกรณ์เหล่านั้นจะย่อลงทั้งหมดของหน้าเว็บตามอัตราส่วนเพื่อที่จะรัดเรียบให้เข้ากับขนาดหน้าจอ

นี่ไม่ใช่สิ่งที่สมบูรณ์แบบ! นั่นเป็นการแก้ไขที่รวดเร็ว

ตั้งค่า viewport

HTML5 ได้นำเข้าวิธีที่ให้ผู้ออกแบบเว็บเพื่อ <meta> แท็กเพื่อควบคุม viewport

คุณควรมีอยู่ในทุกหน้าเว็บของคุณ <meta> องค์ประกอบ viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

มันให้เบราเซอร์คำสั่งเกี่ยวกับวิธีการควบคุมขนาดและระดับการย่อยขยายของหน้าเว็บ

width=device-width บางส่วนจะตั้งค่าความกว้างของหน้าเว็บเพื่อตามความกว้างของหน้าจอของอุปกรณ์ (ตามอุปกรณ์)

เมื่อเบราเซอร์ลงหลักฐานหน้าเว็บครั้งแรกinitial-scale=1.0 บางการตั้งค่าตั้งต้นของระดับการย่อยขยาย

ด้านล่างนี้คือตัวอย่างของเว็บไซต์ที่ไม่มีสัญญาณ meta ตัวมาก และเว็บไซต์ที่มีสัญญาณ meta ตัวมาก

คำแนะนำ:หากคุณตรวจสอบเว็บหน้านี้ด้วยโทรศัพท์หรือแท้งคลาง คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง



ไม่มีสัญญาณviewport meta


มีสัญญาณviewport meta

ปรับสนับสนุนเนื้อหาให้เข้ากับขนาดของโซ่ดู

ประสบการณ์ของผู้ใช้ส่วนใหญ่คือเลื่อนเว็บไซต์ตามแนวตั้งในคอมพิวเตอร์หรืออุปกรณ์เคลื่อนที่ ไม่ใช่เลื่อนตามแนวนอน

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

ต้องทำตามกฎที่ต้องเลือกใช้เพิ่มเติม

1. ไม่ควรใช้องค์ประกอบกว้างที่เป็นตัวเลขเสริม - ตัวอย่างเช่น ถ้าความกว้างของรูปภาพมากกว่าความกว้างของหน้าต่างมอง อาจทำให้หน้าต่างมองเลื่อนนอกเมื่อคลิกที่ด้านข้างของหน้าต่างมอง โปรดปรับเนื้อหาเพื่อให้เหมาะกับความกว้างของหน้าต่างมอง

2. ไม่ควรให้เนื้อหาขึ้นอยู่กับความกว้างของหน้าต่างมองที่เฉพาะเจาะจงเพื่อแสดงผลที่ดี - เนื่องจากขนาดและความกว้างของหน้าต่างมองและความกว้างที่นับความตั้งตาราง CSS แตกต่างกันอย่างมากระหว่างอุปกรณ์ จึงไม่ควรให้เนื้อหาขึ้นอยู่กับความกว้างของหน้าต่างมองที่เฉพาะเจาะจงเพื่อแสดงผลที่ดี

3. ใช้ CSS คำขอค้นมีเดียวเพื่อใช้งานรูปแบบที่ต่างกันสำหรับหน้าต่างมองเล็กและใหญ่ - การกำหนดความกว้างที่เป็นตัวเลขเสริมของ CSS สำหรับองค์ประกอบหน้าเว็บจะทำให้องค์ประกอบนี้มีความกว้างเกินไปสำหรับหน้าต่างมองเพื่ออุปกรณ์ที่เล็ก และจะต้องคิดถึงการใช้ค่ากว้างที่เป็นค่าสัมพันธ์ เช่น width: 100% อีกด้วย และเป็นจริงแล้ว ต้องระมัดระวังการใช้ค่าตัวเลขเสริมที่ใหญ่เกินไป ซึ่งอาจทำให้องค์ประกอบหลุดออกนอกหน้าต่างมองของอุปกรณ์ที่เล็ก