เมื่อจำนวนผู้ใช้โทรศัพท์มือถือบนอินเทอร์เน็ตเพิ่มขึ้นเรื่อยๆ นักออกแบบเว็บจึงต้องให้ความสำคัญกับการจัดวางเนื้อหาในลักษณะที่เหมาะกับขนาดหน้าจอต่างๆ มากขึ้น การออกแบบเว็บไซต์ที่ปรับเปลี่ยนตามพื้นที่โฆษณา ซึ่งเดิมกำหนดโดย 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 เมื่อมีชุดรายการที่มีขนาดแตกต่างกันและต้องการให้รายการเหล่านั้น พอดีกับแถวเดียวหรือหลายแถว โดยรายการขนาดเล็กจะใช้พื้นที่น้อยกว่า และรายการขนาดใหญ่จะใช้พื้นที่มากกว่า
.items {
display: flex;
justify-content: space-between;
}
คุณสามารถใช้ Flexbox เพื่อแสดงรายการเป็นแถวเดียวหรือแสดงหลายแถวเมื่อพื้นที่ว่างลดลง
อ่านเพิ่มเติมเกี่ยวกับ Flexbox
เลย์เอาต์ตารางกริด CSS
เลย์เอาต์กริด CSS จะสร้างกริดที่ยืดหยุ่น คุณสามารถปรับปรุงตัวอย่างที่ลอยอยู่ก่อนหน้านี้
ได้โดยใช้เลย์เอาต์กริดและหน่วย fr ซึ่งแสดงถึงสัดส่วนของ
พื้นที่ว่างในคอนเทนเนอร์
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
นอกจากนี้ คุณยังใช้ตารางกริดเพื่อสร้างเลย์เอาต์ตารางกริดปกติที่มีรายการมากเท่าที่ใส่ได้ด้วย จำนวนแทร็กที่พร้อมใช้งานจะลดลงเมื่อขนาดหน้าจอ
เล็กลง การสาธิตต่อไปนี้แสดงตารางกริดที่มีการ์ดจำนวนมากที่สุดเท่าที่จะพอดีใน
แต่ละแถว โดยมีขนาดขั้นต่ำ 200px
อ่านเพิ่มเติมเกี่ยวกับเลย์เอาต์กริด CSS
เลย์เอาต์แบบหลายคอลัมน์
สำหรับเลย์เอาต์บางประเภท คุณสามารถใช้เลย์เอาต์หลายคอลัมน์ (Multicol)
ซึ่งจะสร้างจำนวนคอลัมน์ที่ตอบสนองตามอุปกรณ์ด้วยพร็อพเพอร์ตี้ column-width
ในการสาธิตต่อไปนี้ หน้าเว็บจะเพิ่มคอลัมน์เมื่อมีที่ว่างสำหรับ200pxคอลัมน์อื่น
อ่านเพิ่มเติมเกี่ยวกับ Multicol
ใช้คำค้นหาสื่อ CSS เพื่อการตอบสนอง
บางครั้งคุณอาจต้องทำการเปลี่ยนแปลงเลย์เอาต์เพิ่มเติมเพื่อรองรับขนาดหน้าจอบางขนาดมากกว่าที่เทคนิคที่อธิบายไว้ก่อนหน้านี้อนุญาต ซึ่งคิวรี่สื่อจะมีประโยชน์ในกรณีนี้
Media Queries เป็นตัวกรองที่เรียบง่ายซึ่งคุณใช้กับรูปแบบ CSS เพื่อเปลี่ยน รูปแบบเหล่านั้นตามประเภทอุปกรณ์ที่แสดงเนื้อหาได้ นอกจากนี้ยังเปลี่ยนรูปแบบตามฟีเจอร์ของอุปกรณ์ได้ด้วย เช่น ความกว้าง ความสูง การวางแนว และดูว่าอุปกรณ์ใช้เป็นหน้าจอสัมผัสหรือไม่
หากต้องการระบุสไตล์ต่างๆ สำหรับการพิมพ์ คุณสามารถกำหนดเป้าหมายประเภทเอาต์พุตและ รวมชีตสไตล์สำหรับสไตล์การพิมพ์ได้โดยทำดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
นอกจากนี้ คุณยังใช้การค้นหาสื่อเพื่อรวมสไตล์การพิมพ์ไว้ในชีตสไตล์หลักได้ด้วย
@media print {
/* print styles go here */
}
สําหรับการออกแบบเว็บที่ปรับเปลี่ยนตามอุปกรณ์ คําค้นหาที่พบบ่อยที่สุดคือฟีเจอร์ของอุปกรณ์ ดังนั้นคุณจึงปรับแต่งเลย์เอาต์สําหรับหน้าจอสัมผัสหรือหน้าจอขนาดเล็กได้
คิวรี่สื่อตามขนาดวิวพอร์ต
คิวรี่สื่อช่วยให้คุณสร้างประสบการณ์ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งใช้รูปแบบที่เฉพาะเจาะจงกับขนาดหน้าจอที่เฉพาะเจาะจงได้ การค้นหาขนาดหน้าจอสามารถทดสอบสิ่งต่อไปนี้ได้
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Media Query ตามความสามารถของอุปกรณ์
เนื่องจากมีอุปกรณ์หลากหลายประเภท นักพัฒนาแอปจึงไม่สามารถสันนิษฐานได้ว่าอุปกรณ์ขนาดใหญ่ทุกเครื่องเป็นคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อปทั่วไป หรืออุปกรณ์ขนาดเล็กทุกเครื่องใช้หน้าจอสัมผัส การเพิ่มข้อกำหนดของ Media Queries ใหม่ๆ บางอย่างช่วยให้คุณทดสอบฟีเจอร์ต่างๆ ได้ เช่น ประเภทของเคอร์เซอร์ที่ใช้ในการโต้ตอบกับอุปกรณ์ และดูว่าผู้ใช้สามารถวางเคอร์เซอร์เหนือองค์ประกอบได้หรือไม่
hoverpointerany-hoverany-pointer
ลองดูการสาธิตนี้ในอุปกรณ์ต่างๆ เช่น คอมพิวเตอร์เดสก์ท็อปทั่วไปและโทรศัพท์หรือแท็บเล็ต
ฟีเจอร์ใหม่ๆ เหล่านี้ได้รับการรองรับอย่างดีในเบราว์เซอร์สมัยใหม่ทั้งหมด ดูข้อมูลเพิ่มเติมได้ที่หน้า MDN สำหรับ hover any-hover pointer และ any-pointer
ใช้ any-hover และ any-pointer
ฟีเจอร์ any-hover และ any-pointer จะทดสอบว่าผู้ใช้สามารถวางเคอร์เซอร์
เหนือองค์ประกอบ (มักเรียกว่าการวางเมาส์) หรือใช้เคอร์เซอร์ได้หรือไม่ แม้ว่าเคอร์เซอร์
จะไม่ใช่วิธีหลักที่ผู้ใช้โต้ตอบกับอุปกรณ์ก็ตาม โปรดระมัดระวังอย่างยิ่งเมื่อใช้
องค์ประกอบเหล่านี้ เช่น เพื่อหลีกเลี่ยงการบังคับให้ผู้ใช้หน้าจอสัมผัสเปลี่ยนไปใช้เมาส์
อย่างไรก็ตาม any-hover และ any-pointer อาจมีประโยชน์หากคุณต้องการ
พิจารณาว่าผู้ใช้มีอุปกรณ์ประเภทใด เช่น แล็ปท็อปที่มี
หน้าจอสัมผัสและแทร็กแพดควรจับคู่กับเคอร์เซอร์หยาบและเคอร์เซอร์ละเอียด นอกเหนือจาก
ความสามารถในการวางเมาส์
วิธีเลือกเบรกพอยท์
อย่ากำหนดจุดพักตามคลาสของอุปกรณ์ หรือผลิตภัณฑ์ ชื่อแบรนด์ หรือ ระบบปฏิบัติการ ซึ่งจะทำให้โค้ดของคุณดูแลรักษายาก แต่ให้เนื้อหาเป็นตัวกำหนดว่าเลย์เอาต์จะเปลี่ยนอย่างไรเพื่อให้พอดีกับคอนเทนเนอร์
เลือกจุดพักที่สำคัญโดยเริ่มจากจุดเล็กๆ แล้วค่อยๆ เพิ่มขึ้น
ออกแบบเนื้อหาให้พอดีกับหน้าจอขนาดเล็กก่อน จากนั้นขยายหน้าจอ จนกว่าจะจำเป็นต้องใช้เบรกพอยต์ ซึ่งจะช่วยให้คุณลดจำนวน เบรกพอยต์ในหน้าเว็บและเพิ่มประสิทธิภาพตามเนื้อหาได้
ตัวอย่างต่อไปนี้จะแสดงวิดเจ็ตพยากรณ์อากาศที่ ด้านบนของหน้านี้ ขั้นตอนแรกคือการทำให้การคาดการณ์ดูดีบนหน้าจอขนาดเล็ก
จากนั้นปรับขนาดเบราว์เซอร์จนกว่าจะมีพื้นที่ว่างมากเกินไประหว่างองค์ประกอบ
เพื่อให้วิดเจ็ตดูดี การตัดสินใจขึ้นอยู่กับดุลยพินิจ แต่มากกว่า 600px
ถือว่ากว้างเกินไปอย่างแน่นอน
หากต้องการแทรกเบรกพอยต์ที่ 600px ให้สร้างการค้นหาสื่อ 2 รายการที่ส่วนท้ายของ
CSS สำหรับคอมโพเนนต์ โดยรายการหนึ่งใช้เมื่อเบราว์เซอร์มีขนาด 600px หรือแคบกว่า และ
อีกรายการหนึ่งใช้เมื่อเบราว์เซอร์มีขนาดกว้างกว่า 600px
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
สุดท้าย ให้ปรับโครงสร้าง CSS ใหม่ ภายในคิวรี่สื่อสำหรับ max-width ของ 600px
ให้เพิ่ม CSS สำหรับหน้าจอขนาดเล็กเท่านั้น ภายในคิวรี่สื่อสำหรับ a
min-width ของ 601px ให้เพิ่ม CSS สำหรับหน้าจอขนาดใหญ่ขึ้น
เลือกเบรกพอยท์ย่อยเมื่อจำเป็น
นอกเหนือจากการเลือกจุดพักที่สำคัญเมื่อเลย์เอาต์มีการเปลี่ยนแปลงอย่างมากแล้ว การปรับเปลี่ยนสำหรับการเปลี่ยนแปลงเล็กๆ น้อยๆ ก็มีประโยชน์เช่นกัน เช่น ระหว่างเบรกพอยต์หลัก การปรับระยะขอบหรือระยะเว้นขององค์ประกอบ หรือการเพิ่มขนาดแบบอักษรเพื่อให้ดูเป็นธรรมชาติมากขึ้นในเลย์เอาต์อาจเป็นประโยชน์
ตัวอย่างนี้เป็นไปตามรูปแบบเดียวกับตัวอย่างก่อนหน้า โดยเริ่มจากการเพิ่มประสิทธิภาพเลย์เอาต์หน้าจอขนาดเล็ก ก่อนอื่น ให้เพิ่มขนาดแบบอักษรเมื่อความกว้างของ Viewport
มากกว่า 360px หลังจากนั้น เมื่อมีพื้นที่เพียงพอ คุณจะ
แยกอุณหภูมิสูงและต่ำเพื่อให้แสดงในบรรทัดเดียวกัน และ
ขยายไอคอนสภาพอากาศให้ใหญ่ขึ้นได้
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
สำหรับหน้าจอขนาดใหญ่ เราขอแนะนำให้จำกัดความกว้างสูงสุดของแผงการพยากรณ์ เพื่อไม่ให้ใช้ความกว้างของหน้าจอทั้งหมด
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
เพิ่มประสิทธิภาพข้อความเพื่อให้อ่านง่าย
ทฤษฎีความสามารถในการอ่านแบบคลาสสิกแนะนำว่าคอลัมน์ที่เหมาะสมควรมีอักขระ 70-80 ตัวต่อบรรทัด (ประมาณ 8-10 คำในภาษาอังกฤษ) ลองเพิ่ม เบรกพอยต์ทุกครั้งที่ความกว้างของบล็อกข้อความเพิ่มขึ้นเกินประมาณ 10 คำ
ในตัวอย่างนี้ แบบอักษร Roboto ที่ 1em จะแสดง 10 คำต่อบรรทัดใน
หน้าจอขนาดเล็ก แต่หน้าจอขนาดใหญ่ต้องมีเบรกพอยต์ ในกรณีนี้ หาก
ความกว้างของเบราว์เซอร์มากกว่า 575px ความกว้างของเนื้อหาที่เหมาะสมคือ 550px
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
หลีกเลี่ยงการซ่อนเนื้อหา (:#avoid-hiding-content)
โปรดระมัดระวังเมื่อเลือกเนื้อหาที่จะซ่อนหรือแสดงตามขนาดหน้าจอ อย่าซ่อนเนื้อหาเพียงเพราะแสดงบนหน้าจอไม่ได้ ขนาดหน้าจอ ไม่ได้คาดการณ์สิ่งที่ผู้ใช้อาจต้องการดู ตัวอย่างเช่น การนำจำนวนละอองเกสรออกจากพยากรณ์อากาศอาจเป็นปัญหาที่ร้ายแรงสำหรับผู้ที่แพ้ในฤดูใบไม้ผลิซึ่งจำเป็นต้องใช้ข้อมูลดังกล่าวเพื่อตัดสินใจว่าจะออกไปข้างนอกได้หรือไม่
ดูเบรกพอยต์ของ Media Query ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
หลังจากตั้งค่าจุดพักของ Media Query แล้ว ให้ตรวจสอบว่าจุดพักดังกล่าวส่งผลต่อลักษณะที่ปรากฏของเว็บไซต์อย่างไร คุณอาจปรับขนาดหน้าต่างเบราว์เซอร์เพื่อทริกเกอร์เบรกพอยต์ แต่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีฟีเจอร์ในตัวที่แสดงลักษณะของหน้าเว็บภายใต้ เบรกพอยต์ต่างๆ
วิธีดูหน้าเว็บภายใต้เบรกพอยต์ต่างๆ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เปิดโหมดอุปกรณ์ ซึ่งจะเปิดในโหมดที่ปรับเปลี่ยนตามอุปกรณ์ โดยค่าเริ่มต้น
- หากต้องการดู Media Query ให้เปิดเมนูโหมดอุปกรณ์ แล้วเลือก แสดง Media Query ซึ่งจะแสดงเบรกพอยต์เป็นแถบสีเหนือหน้าเว็บ
- คลิกแถบใดแถบหนึ่งเพื่อดูหน้าเว็บขณะที่ Media Query นั้นทํางานอยู่ คลิกขวาที่แถบเพื่อไปยังคำจำกัดความของ Media Query นั้น