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

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

เฟล็กซ์บ็อกซ์

ใช้ 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

คุณลักษณะเหล่านี้ทั้งหมดมีการสนับสนุนเบราว์เซอร์ที่ยอดเยี่ยม สำหรับรายละเอียดเพิ่มเติม รวมถึงข้อมูลการสนับสนุนเบราว์เซอร์ โปรดดู ความกว้าง height, การวางแนว และ สัดส่วนภาพ ใน MDN

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

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

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

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

ฟีเจอร์ใหม่เหล่านี้มีการสนับสนุนที่ดีในเบราว์เซอร์รุ่นใหม่ทั้งหมด ดูข้อมูลเพิ่มเติมใน หน้า MDN สำหรับ Hover เมื่อเลื่อนเมาส์ผ่าน 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 ซึ่งมีไว้สำหรับหน้าจอขนาดเล็กเท่านั้น ในคิวรี่สื่อสำหรับ 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. คลิกที่แถบใดแถบหนึ่งเพื่อดูหน้าเว็บของคุณขณะที่คิวรี่สื่อนั้นทำงานอยู่ คลิกขวาที่แถบเพื่อข้ามไปยังคำจำกัดความของคำค้นหาสื่อนั้น