เมื่อจำนวนผู้ใช้โทรศัพท์มือถือบนอินเทอร์เน็ตเพิ่มขึ้นเรื่อยๆ นักออกแบบเว็บจึงต้องให้ความสำคัญกับการจัดวางเนื้อหาในลักษณะที่เหมาะกับขนาดหน้าจอต่างๆ มากขึ้น การออกแบบเว็บไซต์ที่ปรับเปลี่ยนตามพื้นที่โฆษณา ซึ่งเดิมกำหนดโดย Ethan Marcotte ใน A List Apart เป็นกลยุทธ์การออกแบบที่ตอบสนองความต้องการของผู้ใช้และความสามารถของอุปกรณ์ โดยการเปลี่ยนเลย์เอาต์ของเว็บไซต์ให้เหมาะกับอุปกรณ์ที่ใช้ ตัวอย่างเช่น เว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์อาจแสดงเนื้อหาในมุมมองแบบคอลัมน์เดียวบนโทรศัพท์ 2 คอลัมน์บนแท็บเล็ต และ 3 หรือ 4 คอลัมน์บนคอมพิวเตอร์เดสก์ท็อป
เนื่องจากอุปกรณ์ที่เชื่อมต่ออินเทอร์เน็ตได้มีขนาดหน้าจอที่เป็นไปได้มากมาย จึงเป็นสิ่งสำคัญที่เว็บไซต์ของคุณจะต้องปรับให้เข้ากับขนาดหน้าจอที่มีอยู่หรือในอนาคต การออกแบบที่ตอบสนองตามอุปกรณ์สมัยใหม่ยังคำนึงถึงโหมดการโต้ตอบ เช่น หน้าจอสัมผัสด้วย เป้าหมายคือการเพิ่มประสิทธิภาพประสบการณ์การใช้งานสำหรับทุกคน
ตั้งค่าวิวพอร์ต
หน้าเว็บที่เพิ่มประสิทธิภาพสําหรับอุปกรณ์ต่างๆ ต้องมีเมตาแท็กวิวพอร์ตในส่วนหัวของเอกสาร แท็กนี้จะบอกให้เบราว์เซอร์ควบคุมขนาดและการปรับขนาดของหน้าเว็บ
เบราว์เซอร์ในอุปกรณ์เคลื่อนที่จะแสดงผลหน้าเว็บตามความกว้างของหน้าจอเดสก์ท็อป (โดยปกติประมาณ 980px แต่จะแตกต่างกันไปตามแต่ละอุปกรณ์) เพื่อพยายามมอบประสบการณ์การใช้งานที่ดีที่สุด จากนั้นจะพยายามทำให้เนื้อหาดูดีขึ้นโดยเพิ่มขนาดแบบอักษรและปรับขนาดเนื้อหาให้พอดีกับหน้าจอ ซึ่งอาจทำให้แบบอักษรดูไม่สอดคล้องกันและผู้ใช้ต้องซูมเข้าเพื่อดูและโต้ตอบกับเนื้อหา
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
การใช้ค่าวิวพอร์ตเมตา width=device-width จะบอกให้หน้าเว็บตรงกับความกว้างของหน้าจอในพิกเซลอิสระของอุปกรณ์ (DIP) ซึ่งเป็นหน่วยพิกเซลภาพมาตรฐาน
(ซึ่งอาจประกอบด้วยพิกเซลจริงจำนวนมากบนหน้าจอความหนาแน่นสูง) ซึ่งจะช่วยให้หน้าเว็บจัดเนื้อหาใหม่ให้พอดีกับขนาดหน้าจอต่างๆ
เบราว์เซอร์บางตัวจะคงความกว้างของหน้าเว็บไว้เมื่อหมุนเป็นโหมดแนวนอน และซูมเพื่อเติมเต็มหน้าจอแทนที่จะปรับข้อความใหม่ การเพิ่มค่า initial-scale=1 จะบอกเบราว์เซอร์
ให้ตั้งค่าความสัมพันธ์ 1:1 ระหว่างพิกเซล CSS กับพิกเซลที่ไม่ขึ้นกับอุปกรณ์
โดยไม่คำนึงถึงการวางแนวอุปกรณ์ ซึ่งจะช่วยให้หน้าเว็บใช้ประโยชน์จากความกว้างแนวนอนได้อย่างเต็มที่
การตรวจสอบ Lighthouse ไม่มีแท็ก <meta name="viewport"> ที่มี width หรือ initial-scale
ช่วยให้คุณทำให้กระบวนการตรวจสอบว่าเอกสาร HTML
ใช้เมตาแท็ก Viewport อย่างถูกต้องเป็นแบบอัตโนมัติได้
ปรับขนาดเนื้อหาให้เหมาะสมกับวิวพอร์ต
ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ผู้ใช้คุ้นเคยกับการเลื่อนเว็บไซต์ในแนวตั้ง แต่ไม่คุ้นเคยกับการเลื่อนในแนวนอน การบังคับให้ผู้ใช้เลื่อนในแนวนอนหรือซูมออกเพื่อดูทั้งหน้าเว็บจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี
เมื่อพัฒนาเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ด้วยแท็กวิวพอร์ตเมตา คุณอาจสร้างเนื้อหาหน้าเว็บที่ไม่พอดีกับวิวพอร์ตที่ระบุโดยไม่ตั้งใจ เช่น รูปภาพที่แสดงกว้างกว่าวิวพอร์ตอาจทำให้เกิด การเลื่อนในแนวนอน หากต้องการป้องกันปัญหานี้ ให้ปรับเนื้อหาให้พอดีกับ วิวพอร์ต
ไม่ได้ปรับขนาดเนื้อหาอย่างถูกต้องสำหรับวิวพอร์ต การตรวจสอบของ Lighthouse ช่วยให้คุณทำให้กระบวนการตรวจหาเนื้อหาที่ล้นทำงานโดยอัตโนมัติได้
รูปภาพ
รูปภาพที่มีขนาดคงที่จะทำให้หน้าเว็บเลื่อนหากมีขนาดใหญ่กว่า
วิวพอร์ต เราขอแนะนำให้กำหนด max-width เป็น 100% สำหรับรูปภาพทั้งหมด ซึ่งจะลดขนาดรูปภาพให้พอดีกับพื้นที่ว่างที่มีอยู่ พร้อมทั้งป้องกันไม่ให้รูปภาพขยายเกินขนาดเริ่มต้น
ในกรณีส่วนใหญ่ คุณสามารถทำได้โดยเพิ่มรายการต่อไปนี้ในชีตสไตล์
img {
max-width: 100%;
display: block;
}
เพิ่มขนาดของรูปภาพลงในองค์ประกอบ img
แม้ว่าคุณจะตั้งค่า max-width: 100% แล้ว แต่เราก็ยังแนะนำให้เพิ่มแอตทริบิวต์ width และ
height ลงในแท็ก <img> เพื่อให้เบราว์เซอร์สามารถจองพื้นที่สำหรับ
รูปภาพก่อนที่จะโหลดได้ ซึ่งจะช่วยป้องกันไม่ให้เลย์เอาต์เปลี่ยนแปลง
เลย์เอาต์
เนื่องจากขนาดหน้าจอและความกว้างในพิกเซล CSS แตกต่างกันอย่างมากในอุปกรณ์ต่างๆ (เช่น ระหว่างโทรศัพท์กับแท็บเล็ต และแม้แต่ระหว่างโทรศัพท์ที่แตกต่างกัน) เนื้อหาจึงไม่ควรอาศัยความกว้างของวิวพอร์ตใดวิวพอร์ตหนึ่งเพื่อให้แสดงผลได้ดี
ในอดีต การดำเนินการนี้ต้องตั้งค่าองค์ประกอบเลย์เอาต์เป็นเปอร์เซ็นต์ การใช้การวัดเป็นพิกเซล ทำให้ผู้ใช้ต้องเลื่อนในแนวนอนบนหน้าจอขนาดเล็ก
การใช้เปอร์เซ็นต์แทนจะทำให้คอลัมน์แคบลงในหน้าจอขนาดเล็ก เนื่องจากแต่ละคอลัมน์จะใช้ความกว้างของหน้าจอในเปอร์เซ็นต์เท่ากันเสมอ
เทคนิคเลย์เอาต์ CSS สมัยใหม่ เช่น Flexbox, Grid Layout และ Multicol ทำให้การสร้างกริดที่ยืดหยุ่นเหล่านี้ง่ายขึ้นมาก
Flexbox
ใช้ Flexbox เมื่อมีชุดรายการที่มีขนาดแตกต่างกันและต้องการให้รายการเหล่านั้น พอดีกับแถวเดียวหรือหลายแถว โดยรายการขนาดเล็กจะใช้พื้นที่น้อยกว่า และรายการขนาดใหญ่จะใช้พื้นที่มากกว่า