ข้อมูลเบื้องต้นเกี่ยวกับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์

เมื่อจำนวนผู้ใช้โทรศัพท์มือถือบนอินเทอร์เน็ตเพิ่มขึ้น การวางเลย์เอาต์เนื้อหาในลักษณะที่เหมาะกับหน้าจอขนาดต่างๆ จึงเป็นสิ่งที่นักออกแบบเว็บต้องคำนึงถึงมากขึ้น การออกแบบเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งเดิม 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) ซึ่งเป็นหน่วยพิกเซลภาพมาตรฐาน (ซึ่งอาจประกอบด้วยพิกเซลจริงจำนวนมากบนหน้าจอที่มีความหนาแน่นสูง) ซึ่งจะช่วยให้หน้าเว็บจัดเรียงเนื้อหาใหม่ให้เหมาะกับหน้าจอขนาดต่างๆ

ภาพหน้าจอของหน้าเว็บที่มีข้อความอ่านยากเนื่องจากซูมออกมากเกินไป
หน้าเว็บที่ไม่มีเมตาแท็กวิวพอร์ตโหลดขึ้นมาแบบซูมออกมาก ซึ่งทำให้อ่านข้อความได้ยาก ดูตัวอย่างนี้ใน Glitch
ภาพหน้าจอของหน้าเดียวกันที่มีข้อความขนาดที่อ่านได้
เมื่อตั้งค่าเมตาแท็ก Viewport แล้ว คุณจะอ่านหน้าเว็บได้โดยไม่ต้องซูมเข้า ดูตัวอย่างนี้ใน Glitch

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

ไม่มีแท็ก <meta name="viewport"> ที่มี width หรือ initial-scale การตรวจสอบ Lighthouse จะช่วยให้กระบวนการทำให้เอกสาร HTML ใช้เมตาแท็กของวิวพอร์ตได้อย่างถูกต้องโดยอัตโนมัติ

ปรับขนาดเนื้อหาให้เหมาะกับวิวพอร์ต

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

เมื่อพัฒนาเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ด้วยแท็กเมตาวิวพอร์ต การสร้างเนื้อหาหน้าเว็บที่ไม่พอดีกับวิวพอร์ตที่ระบุโดยไม่ตั้งใจนั้นเป็นเรื่องปกติ เช่น รูปภาพที่แสดงกว้างกว่าวิวพอร์ตอาจทําให้เกิดการเลื่อนในแนวนอน เพื่อป้องกันไม่ให้เกิดเหตุการณ์ดังกล่าว ให้ปรับเนื้อหาให้พอดีกับวิวพอร์ต

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

รูปภาพ

รูปภาพที่มีขนาดคงที่จะทำให้หน้าเว็บเลื่อนหากมีขนาดใหญ่กว่าวิวพอร์ต เราขอแนะนำให้กำหนดmax-widthของรูปภาพทั้งหมดเป็น 100% ซึ่งจะย่อรูปภาพให้พอดีกับพื้นที่ว่างที่มีอยู่ พร้อมกับป้องกันไม่ให้รูปภาพยืดเกินขนาดเดิม

ในกรณีส่วนใหญ่ คุณสามารถดำเนินการนี้ได้โดยเพิ่มข้อมูลต่อไปนี้ลงในสไตล์ชีต

img {
  max-width: 100%;
  display: block;
}

เพิ่มขนาดของรูปภาพลงในองค์ประกอบ img

แม้ว่าคุณจะตั้งค่า max-width: 100% แล้วก็ตาม เรายังคงแนะนำให้เพิ่มแอตทริบิวต์ width และ height ลงในแท็ก <img> เพื่อให้เบราว์เซอร์จองพื้นที่สำหรับรูปภาพก่อนที่จะโหลดได้ ซึ่งช่วยป้องกันการเปลี่ยนแปลงเลย์เอาต์

เลย์เอาต์

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

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

ภาพหน้าจอของเลย์เอาต์ 2 คอลัมน์ที่มีคอลัมน์ที่ 2 ส่วนใหญ่อยู่นอกวิดเจ็ตการดู
เลย์เอาต์แบบลอยโดยใช้พิกเซล ดูตัวอย่างนี้ใน Glitch

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

เทคนิคการจัดวาง CSS สมัยใหม่ เช่น Flexbox, เลย์เอาต์ตารางกริด และ 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

เลย์เอาต์หลายคอลัมน์

สำหรับเลย์เอาต์บางประเภท คุณสามารถใช้เลย์เอาต์แบบหลายคอลัมน์ (มัลติคอลัมน์) ได้ ซึ่งจะสร้างจำนวนคอลัมน์ที่ปรับเปลี่ยนตามอุปกรณ์ด้วยพร็อพเพอร์ตี้ column-width ในการแสดงตัวอย่างต่อไปนี้ หน้าเว็บจะเพิ่มคอลัมน์เมื่อมีที่ว่างสำหรับคอลัมน์ 200px คอลัมน์อื่น

อ่านเพิ่มเติมเกี่ยวกับ Multicol

ใช้คำค้นหาสื่อ CSS สำหรับการตอบสนอง

บางครั้งคุณอาจต้องทําการเปลี่ยนแปลงเลย์เอาต์อย่างละเอียดมากขึ้นเพื่อรองรับหน้าจอบางขนาดที่เทคนิคที่อธิบายไว้ก่อนหน้านี้ไม่รองรับ ด้วยเหตุนี้ คิวรีสื่อจึงมีประโยชน์

คิวรีสื่อคือตัวกรองง่ายๆ ที่คุณสามารถใช้กับรูปแบบ 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)
  • orientation
  • aspect-ratio

ฟีเจอร์ทั้งหมดนี้รองรับเบราว์เซอร์ได้อย่างยอดเยี่ยม ดูรายละเอียดเพิ่มเติม รวมถึงข้อมูลการรองรับเบราว์เซอร์ได้ที่ width, height, orientation และ aspect-ratio ใน MDN

การค้นหาสื่อตามความสามารถของอุปกรณ์

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

  • hover
  • pointer
  • any-hover
  • any-pointer

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

ฟีเจอร์ใหม่เหล่านี้มีการสนับสนุนที่ดีในเบราว์เซอร์รุ่นใหม่ทั้งหมด ดูข้อมูลเพิ่มเติมได้ที่หน้า MDN สำหรับเมื่อวางเมาส์ วางเคอร์เซอร์เหนือใดก็ได้ เคอร์เซอร์ และตัวชี้ใดก็ได้

ใช้ any-hover และ any-pointer

ฟีเจอร์ any-hover และ any-pointer จะทดสอบว่าผู้ใช้สามารถวางเคอร์เซอร์เหนือองค์ประกอบ (มักเรียกว่าการโฮเวอร์) หรือใช้เคอร์เซอร์ได้หรือไม่ แม้ว่าจะไม่ใช่วิธีหลักในการโต้ตอบกับอุปกรณ์ก็ตาม โปรดระมัดระวังให้มากเมื่อใช้ เช่น หลีกเลี่ยงการบังคับให้ผู้ใช้หน้าจอสัมผัสเปลี่ยนไปใช้เมาส์ อย่างไรก็ตาม any-hover และ any-pointer อาจมีประโยชน์ในกรณีที่จำเป็นต้องระบุประเภทอุปกรณ์ของผู้ใช้ เช่น แล็ปท็อปที่มีหน้าจอสัมผัสและแทร็กแพดควรจับคู่กับเคอร์เซอร์แบบหยาบและแบบละเอียด นอกเหนือจากความสามารถในการวางเมาส์เหนือ

วิธีเลือกเบรกพอยต์

อย่ากำหนดจุดหยุดพักตามคลาสอุปกรณ์ หรือผลิตภัณฑ์ ชื่อแบรนด์ หรือระบบปฏิบัติการ ซึ่งทำให้ดูแลรักษาโค้ดได้ยาก แต่ให้เนื้อหาเป็นตัวกำหนดว่าเลย์เอาต์จะเปลี่ยนแปลงอย่างไรให้พอดีกับคอนเทนเนอร์

เลือกจุดแบ่งหลักโดยเริ่มจากจุดเล็กๆ แล้วค่อยๆ เพิ่มขนาด

ออกแบบเนื้อหาให้พอดีกับหน้าจอขนาดเล็กก่อน จากนั้นขยายหน้าจอจนกว่าจะต้องมีจุดพัก วิธีนี้ช่วยให้คุณลดจํานวนจุดตัดในหน้าเว็บและเพิ่มประสิทธิภาพจุดตัดตามเนื้อหาได้

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

ภาพหน้าจอของแอปพยากรณ์อากาศที่มีขนาดหน้าจออุปกรณ์เคลื่อนที่
แอปที่มีขนาดความกว้างแคบ

ถัดไป ให้ปรับขนาดเบราว์เซอร์จนกว่าจะมีเว้นวรรคมากเกินไประหว่างองค์ประกอบต่างๆ เพื่อให้วิดเจ็ตดูดี การตัดสินใจขึ้นอยู่กับแต่ละบุคคล แต่หากมากกว่า 600px ก็ถือว่ากว้างเกินไป

ภาพหน้าจอของแอปสภาพอากาศที่มีช่องว่างกว้างๆ ระหว่างรายการต่างๆ
เมื่อใช้ขนาดนี้ เลย์เอาต์ของแอปอาจเปลี่ยนแปลง

หากต้องการแทรกจุดหยุดพักที่ 600px ให้สร้างคิวรีสื่อ 2 รายการที่ส่วนท้ายของ CSS สําหรับคอมโพเนนต์ โดย 1 รายการจะใช้เมื่อเบราว์เซอร์มีขนาด 600px หรือแคบกว่า และอีก 1 รายการจะใช้เมื่อเบราว์เซอร์กว้างกว่า 600px

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

สุดท้าย ให้ปรับโครงสร้าง CSS ในคิวรีสื่อสำหรับ max-width ของ 600px ให้เพิ่ม CSS สำหรับหน้าจอขนาดเล็กเท่านั้น ในคิวรีสื่อสำหรับ min-width ของ 601px ให้เพิ่ม CSS สำหรับหน้าจอขนาดใหญ่

เลือกเบรกพอยต์ย่อยเมื่อจำเป็น

นอกจากการเลือกเบรกพอยท์หลักเมื่อเลย์เอาต์เปลี่ยนแปลงอย่างมากแล้ว คุณควรปรับให้เข้ากับการเปลี่ยนแปลงเล็กน้อยด้วย เช่น ระหว่างจุดตัดหลัก คุณอาจปรับระยะขอบหรือระยะห่างในองค์ประกอบ หรือเพิ่มขนาดแบบอักษรเพื่อให้เลย์เอาต์ดูเป็นธรรมชาติมากขึ้น

ตัวอย่างนี้ใช้รูปแบบเดียวกันกับรูปแบบก่อนหน้านี้ โดยเริ่มจากการเพิ่มประสิทธิภาพเลย์เอาต์หน้าจอขนาดเล็ก ขั้นแรก ให้เพิ่มขนาดแบบอักษรเมื่อความกว้างของวิวพอร์ตมากกว่า 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)

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

ดูเบรกพอยท์ของคำค้นหาสื่อในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

หลังจากตั้งค่าจุดหยุดกลางของข้อความค้นหาสื่อแล้ว ให้ตรวจสอบว่าจุดหยุดกลางส่งผลต่อลักษณะที่ปรากฏของเว็บไซต์อย่างไร คุณสามารถปรับขนาดหน้าต่างเบราว์เซอร์เพื่อทริกเกอร์เบรกพอยท์ แต่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีฟีเจอร์ในตัวที่แสดงลักษณะของหน้าเว็บภายใต้เบรกพอยท์ต่างๆ

ภาพหน้าจอของ DevTools ที่มีแอปสภาพอากาศเปิดอยู่และเลือกความกว้าง 822 พิกเซล
เครื่องมือสำหรับนักพัฒนาเว็บแสดงแอปสภาพอากาศในขนาดวิวพอร์ตที่กว้างขึ้น
ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีแอปสภาพอากาศเปิดอยู่และเลือกความกว้าง 436 พิกเซล
เครื่องมือสำหรับนักพัฒนาเว็บแสดงแอปพยากรณ์อากาศในวิวพอร์ตขนาดแคบลง

วิธีดูหน้าเว็บภายใต้จุดตัดต่างๆ

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. เปิดโหมดอุปกรณ์ ซึ่งจะเปิดในโหมดที่ปรับเปลี่ยนได้โดยค่าเริ่มต้น
  3. หากต้องการดูการค้นหาสื่อ ให้เปิดเมนูโหมดอุปกรณ์แล้วเลือกแสดงการค้นหาสื่อ ซึ่งจะแสดงจุดพักเป็นแถบสีเหนือหน้าเว็บ
  4. คลิกแถบใดแถบหนึ่งเพื่อดูหน้าเว็บขณะที่การค้นหาสื่อนั้นทำงานอยู่ คลิกขวาที่แถบเพื่อข้ามไปยังคำจำกัดความของคําค้นหาสื่อนั้น