22 สิงหาคม 2568ไทย

คู่มือฉบับสมบูรณ์สำหรับ CSS viewport meta tag เพื่อให้เว็บของคุณทำงานได้อย่างไร้ที่ติบนมือถือทั่วโลก เรียนรู้แนวทางปฏิบัติที่ดีที่สุดและเทคนิคขั้นสูงสำหรับ Responsive Design

การใช้งาน CSS Viewport Meta Tag ให้เชี่ยวชาญ: ปรับปรุงประสบการณ์บนมือถือทั่วโลก

ในโลกยุค mobile-first ปัจจุบัน การทำให้เว็บไซต์ของคุณดูดีและทำงานได้อย่างไร้ที่ติบนอุปกรณ์ที่หลากหลายถือเป็นสิ่งสำคัญอย่างยิ่ง CSS viewport meta tag เป็นองค์ประกอบสำคัญในการบรรลุเป้าหมายนี้ มันควบคุมวิธีการปรับขนาดและแสดงผลเว็บไซต์ของคุณบนหน้าจอขนาดต่างๆ ซึ่งส่งผลโดยตรงต่อประสบการณ์ของผู้ใช้และการเข้าถึงได้ คู่มือฉบับสมบูรณ์นี้จะเจาะลึกถึงรายละเอียดของ viewport meta tag เพื่อให้คุณมีความรู้และเทคนิคในการปรับปรุงเว็บไซต์ของคุณสำหรับอุปกรณ์พกพาทั่วโลก

CSS Viewport Meta Tag คืออะไร?

Viewport meta tag คือ HTML meta tag ที่อยู่ในส่วน <head> ของหน้าเว็บของคุณ มันจะสั่งให้เบราว์เซอร์ควบคุมขนาดและการปรับสเกลของหน้าเว็บในอุปกรณ์ต่างๆ หากไม่มี viewport meta tag ที่กำหนดค่าไว้อย่างถูกต้อง เบราว์เซอร์บนมือถืออาจแสดงผลเว็บไซต์ของคุณเป็นเวอร์ชันเดสก์ท็อปที่ซูมออก ทำให้ยากต่อการอ่านและนำทาง นี่เป็นเพราะโดยปกติแล้วเบราว์เซอร์บนมือถือมักจะสมมติว่ามี viewport ขนาดใหญ่ (โดยทั่วไปคือ 980px) เพื่อรองรับเว็บไซต์รุ่นเก่าที่ไม่ได้ออกแบบมาสำหรับมือถือ

ไวยากรณ์พื้นฐานของ viewport meta tag เป็นดังนี้:

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

เรามาดูรายละเอียดของแต่ละ attribute กัน:

name="viewport": ระบุว่า meta tag นี้กำลังควบคุมการตั้งค่า viewport
content="...": attribute นี้จะเก็บคำสั่งเฉพาะสำหรับ viewport
width=device-width: ตั้งค่าความกว้างของ viewport ให้ตรงกับความกว้างหน้าจอของอุปกรณ์ ซึ่งเป็นการตั้งค่าที่สำคัญมากสำหรับ responsive design
initial-scale=1.0: ตั้งค่าระดับการซูมเริ่มต้นเมื่อหน้าเว็บถูกโหลดครั้งแรก ค่า 1.0 หมายถึงไม่มีการซูมเริ่มต้น

ทำไม Viewport Meta Tag ถึงสำคัญ?

Viewport meta tag มีความสำคัญด้วยเหตุผลหลายประการ:

ประสบการณ์ผู้ใช้ที่ดีขึ้น: viewport ที่กำหนดค่าไว้อย่างเหมาะสมจะช่วยให้เว็บไซต์ของคุณอ่านง่ายและนำทางได้สะดวกบนอุปกรณ์พกพา ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น ผู้ใช้ไม่จำเป็นต้องใช้นิ้วขยายเพื่ออ่านเนื้อหา
ความเป็นมิตรกับมือถือที่เพิ่มขึ้น: Google ให้ความสำคัญกับเว็บไซต์ที่เป็นมิตรกับมือถือในการจัดอันดับการค้นหา การใช้ viewport meta tag เป็นขั้นตอนพื้นฐานในการทำให้เว็บไซต์ของคุณเป็นมิตรกับมือถือ
ความเข้ากันได้ข้ามอุปกรณ์: ช่วยให้เว็บไซต์ของคุณปรับตัวเข้ากับขนาดหน้าจอและความละเอียดที่หลากหลาย ทำให้ได้รับประสบการณ์ที่สอดคล้องกันในอุปกรณ์ต่างๆ ไม่ว่าจะเป็นโทรศัพท์ Android, iPhone, แท็บเล็ตทุกขนาด และอุปกรณ์พับได้ - viewport ช่วยให้คุณจัดการได้ทั้งหมด
การเข้าถึงได้ (Accessibility): การปรับขนาดและการแสดงผลที่เหมาะสมช่วยปรับปรุงการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น พวกเขาสามารถใช้ฟีเจอร์การซูมของเบราว์เซอร์ได้โดยที่เลย์เอาต์ของคุณจะไม่เสีย

คุณสมบัติและค่าสำคัญของ Viewport

นอกเหนือจากคุณสมบัติพื้นฐานอย่าง width และ initial-scale แล้ว viewport meta tag ยังรองรับคุณสมบัติอื่นๆ ที่ให้การควบคุม viewport ได้มากขึ้น:

minimum-scale: กำหนดระดับการซูมต่ำสุดที่อนุญาต ตัวอย่างเช่น minimum-scale=0.5 จะอนุญาตให้ผู้ใช้ซูมออกได้ถึงครึ่งหนึ่งของขนาดดั้งเดิม
maximum-scale: กำหนดระดับการซูมสูงสุดที่อนุญาต ตัวอย่างเช่น maximum-scale=3.0 จะอนุญาตให้ผู้ใช้ซูมเข้าได้ถึงสามเท่าของขนาดดั้งเดิม
user-scalable: ควบคุมว่าผู้ใช้ได้รับอนุญาตให้ซูมเข้าหรือออกหรือไม่ โดยรับค่าเป็น yes (ค่าเริ่มต้น, อนุญาตให้ซูม) หรือ no (ปิดการใช้งานการซูม) ข้อควรระวัง: การปิดใช้งาน user-scalable อาจส่งผลกระทบอย่างมากต่อการเข้าถึงได้ และควรหลีกเลี่ยงในกรณีส่วนใหญ่

ตัวอย่างการกำหนดค่า Viewport Meta Tag

นี่คือตัวอย่างการกำหนดค่า viewport meta tag ที่พบบ่อยและผลกระทบของมัน:

การกำหนดค่าพื้นฐาน (แนะนำ): <meta name="viewport" content="width=device-width, initial-scale=1.0">
นี่คือการกำหนดค่าที่พบบ่อยที่สุดและแนะนำ มันจะตั้งค่าความกว้างของ viewport เป็นความกว้างของอุปกรณ์และป้องกันการซูมเริ่มต้น
การปิดใช้งานการซูมโดยผู้ใช้ (ไม่แนะนำ): <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
การกำหนดค่านี้จะปิดการใช้งานการซูมโดยผู้ใช้ แม้ว่าอาจจะดูน่าสนใจในแง่ของความสอดคล้องของการออกแบบ แต่มันเป็นอุปสรรคต่อการเข้าถึงอย่างรุนแรงและโดยทั่วไปไม่แนะนำให้ทำ
การตั้งค่าสเกลต่ำสุดและสูงสุด: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">
การกำหนดค่านี้จะตั้งค่าระดับการซูมต่ำสุดเป็น 0.5 และระดับการซูมสูงสุดเป็น 2.0 ควรใช้อย่างระมัดระวังโดยคำนึงถึงผลกระทบต่อประสบการณ์ของผู้ใช้

แนวทางปฏิบัติที่ดีที่สุดสำหรับการกำหนดค่า Viewport Meta Tag

นี่คือแนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติตามเมื่อกำหนดค่า viewport meta tag:

ใส่ Viewport Meta Tag เสมอ: อย่าละเว้น viewport meta tag จากเอกสาร HTML ของคุณ โดยเฉพาะอย่างยิ่งเมื่อเป้าหมายคือผู้ใช้มือถือ
ใช้ width=device-width: นี่คือรากฐานของ responsive design และช่วยให้เว็บไซต์ของคุณปรับเข้ากับขนาดหน้าจอที่แตกต่างกันได้
ตั้งค่า initial-scale=1.0: ป้องกันการซูมเริ่มต้นเพื่อให้ผู้ใช้มีจุดเริ่มต้นที่สอดคล้องกัน
หลีกเลี่ยงการปิดใช้งานการซูมโดยผู้ใช้ (user-scalable=no): หากไม่มีเหตุผลที่จำเป็นจริงๆ (เช่น แอปพลิเคชันสำหรับตู้คีออส) ให้หลีกเลี่ยงการปิดใช้งานการซูมของผู้ใช้ เพราะมันสำคัญอย่างยิ่งต่อการเข้าถึงได้
ทดสอบบนอุปกรณ์หลายเครื่อง: ทดสอบเว็บไซต์ของคุณอย่างละเอียดบนอุปกรณ์ต่างๆ (สมาร์ทโฟน, แท็บเล็ต, ระบบปฏิบัติการที่แตกต่างกัน) เพื่อให้แน่ใจว่าแสดงผลได้อย่างถูกต้อง ทั้ง emulators และอุปกรณ์จริงต่างก็มีประโยชน์
คำนึงถึงการเข้าถึงได้: ให้ความสำคัญกับการเข้าถึงได้เสมอเมื่อกำหนดค่า viewport คิดถึงผู้ใช้ที่มีความบกพร่องทางการมองเห็นและตรวจสอบให้แน่ใจว่าพวกเขาสามารถซูมเข้าและออกได้อย่างสะดวกสบาย
ใช้ CSS Media Queries: Viewport meta tag ทำงานร่วมกับ CSS media queries เพื่อสร้างเลย์เอาต์ที่ตอบสนองได้อย่างแท้จริง ใช้ media queries เพื่อปรับสไตล์ตามขนาดหน้าจอ, การวางแนว และปัจจัยอื่นๆ

CSS Media Queries: คู่หูที่สมบูรณ์แบบสำหรับ Viewport

Viewport meta tag เป็นการปูทาง แต่ CSS media queries คือสิ่งที่ทำให้ responsive design มีชีวิตขึ้นมา Media queries ช่วยให้คุณสามารถใช้สไตล์ที่แตกต่างกันตามคุณลักษณะของอุปกรณ์ เช่น ความกว้าง, ความสูง, การวางแนว และความละเอียดของหน้าจอ

นี่คือตัวอย่างของ CSS media query ที่ใช้สไตล์ที่แตกต่างกันสำหรับหน้าจอที่เล็กกว่า 768px (ทั่วไปสำหรับสมาร์ทโฟน):

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

Media query นี้จะกำหนดเป้าหมายไปยังอุปกรณ์ที่มีความกว้างสูงสุด 768 พิกเซล และใช้สไตล์ที่อยู่ภายในวงเล็บปีกกา คุณสามารถใช้ media queries เพื่อปรับขนาดตัวอักษร, margins, padding, เลย์เอาต์ และคุณสมบัติ CSS อื่นๆ เพื่อปรับปรุงเว็บไซต์ของคุณสำหรับขนาดหน้าจอที่แตกต่างกัน

Common Media Query Breakpoints

แม้ว่าคุณจะสามารถกำหนด breakpoints ของคุณเองได้ แต่นี่คือ breakpoints ที่ใช้กันทั่วไปสำหรับ responsive design:

อุปกรณ์ขนาดเล็กพิเศษ (โทรศัพท์, น้อยกว่า 576px): @media (max-width: 575.98px) { ... }
อุปกรณ์ขนาดเล็ก (โทรศัพท์, 576px ขึ้นไป): @media (min-width: 576px) and (max-width: 767.98px) { ... }
อุปกรณ์ขนาดกลาง (แท็บเล็ต, 768px ขึ้นไป): @media (min-width: 768px) and (max-width: 991.98px) { ... }
อุปกรณ์ขนาดใหญ่ (เดสก์ท็อป, 992px ขึ้นไป): @media (min-width: 992px) and (max-width: 1199.98px) { ... }
อุปกรณ์ขนาดใหญ่พิเศษ (เดสก์ท็อปขนาดใหญ่, 1200px ขึ้นไป): @media (min-width: 1200px) { ... }

Breakpoints เหล่านี้อ้างอิงจากระบบกริดของ Bootstrap แต่ก็เป็นจุดเริ่มต้นที่ดีสำหรับการออกแบบ responsive ส่วนใหญ่

ข้อควรพิจารณาในระดับสากลสำหรับการกำหนดค่า Viewport

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

การใช้งานอุปกรณ์ที่หลากหลาย: ความนิยมของอุปกรณ์แตกต่างกันไปในแต่ละภูมิภาค ตัวอย่างเช่น โทรศัพท์ฟีเจอร์โฟนอาจยังคงเป็นที่นิยมในบางประเทศกำลังพัฒนา ในขณะที่สมาร์ทโฟนระดับไฮเอนด์ครองตลาดในที่อื่นๆ วิเคราะห์การเข้าชมเว็บไซต์ของคุณเพื่อทำความเข้าใจอุปกรณ์ที่ผู้ชมของคุณใช้
การเชื่อมต่อเครือข่าย: ผู้ใช้ในบางภูมิภาคอาจมีการเชื่อมต่ออินเทอร์เน็ตที่ช้ากว่าหรือไม่เสถียร ควรปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณ (ขนาดรูปภาพ, ประสิทธิภาพของโค้ด) เพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่ราบรื่นแม้จะมีแบนด์วิดท์จำกัด
การรองรับภาษา: ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณรองรับหลายภาษาและข้อความแสดงผลได้อย่างถูกต้องบนอุปกรณ์ต่างๆ พิจารณาใช้ attribute lang ใน HTML ของคุณเพื่อระบุภาษาของเนื้อหา
ภาษาที่เขียนจากขวาไปซ้าย (RTL): หากเว็บไซต์ของคุณรองรับภาษา RTL เช่น ภาษาอาหรับหรือฮีบรู ตรวจสอบให้แน่ใจว่าเลย์เอาต์ปรับเปลี่ยนได้อย่างถูกต้อง ใช้ CSS logical properties (เช่น margin-inline-start แทน margin-left) เพื่อความเข้ากันได้ที่ดีขึ้นกับ RTL
มาตรฐานการเข้าถึงได้: ปฏิบัติตามมาตรฐานการเข้าถึงสากล เช่น WCAG (Web Content Accessibility Guidelines) เพื่อให้แน่ใจว่าเว็บไซต์ของคุณสามารถใช้งานได้โดยผู้พิการทั่วโลก

ตัวอย่าง: การจัดการเลย์เอาต์ RTL

ในการจัดการเลย์เอาต์ RTL คุณสามารถใช้ CSS เพื่อกลับทิศทางขององค์ประกอบและปรับการจัดตำแหน่ง นี่คือตัวอย่างการใช้ CSS logical properties:

body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.container {
  margin-inline-start: auto; /* เทียบเท่ากับ margin-left ใน LTR, margin-right ใน RTL */
  margin-inline-end: 0;   /* เทียบเท่ากับ margin-right ใน LTR, margin-left ใน RTL */
}

โค้ดส่วนนี้จะตั้งค่าคุณสมบัติ direction เป็น rtl สำหรับองค์ประกอบ body เมื่อ attribute dir ถูกตั้งค่าเป็น rtl นอกจากนี้ยังใช้ margin-inline-start และ margin-inline-end เพื่อจัดการ margins ได้อย่างถูกต้องทั้งในเลย์เอาต์ LTR และ RTL

การแก้ไขปัญหา Viewport ที่พบบ่อย

นี่คือปัญหา viewport ที่พบบ่อยและวิธีแก้ไข:

เว็บไซต์ดูเหมือนซูมออกบนมือถือ:
สาเหตุ: ไม่มี viewport meta tag หรือกำหนดค่าไม่ถูกต้อง

วิธีแก้ไข: ตรวจสอบให้แน่ใจว่าคุณมี viewport meta tag ในส่วน <head> และตั้งค่า width=device-width และ initial-scale=1.0 ไว้อย่างถูกต้อง
เว็บไซต์ดูแคบหรือกว้างเกินไปในบางอุปกรณ์:
สาเหตุ: media query breakpoints ไม่ถูกต้อง หรือมีองค์ประกอบที่มีความกว้างคงที่ซึ่งไม่ปรับตามขนาดหน้าจอที่แตกต่างกัน

วิธีแก้ไข: ตรวจสอบ media query breakpoints ของคุณและปรับเปลี่ยนตามความจำเป็น ใช้หน่วยที่ยืดหยุ่น (percentages, ems, rems, viewport units) แทนพิกเซลคงที่สำหรับความกว้างและคุณสมบัติอื่นๆ
ผู้ใช้ไม่สามารถซูมเข้าหรือออกได้:
สาเหตุ: มีการตั้งค่า user-scalable=no ใน viewport meta tag

วิธีแก้ไข: ลบ user-scalable=no ออกจาก viewport meta tag อนุญาตให้ผู้ใช้ซูมเข้าและออกได้ เว้นแต่จะมีเหตุผลที่เฉพาะเจาะจงมากในการป้องกัน
รูปภาพบิดเบี้ยวหรือคุณภาพต่ำ:
สาเหตุ: รูปภาพไม่ได้รับการปรับให้เหมาะสมสำหรับขนาดหน้าจอหรือความละเอียดที่แตกต่างกัน

วิธีแก้ไข: ใช้ responsive images ด้วย attribute srcset เพื่อให้บริการรูปภาพขนาดต่างๆ ตามความละเอียดของหน้าจอ ปรับรูปภาพให้เหมาะสมกับการใช้งานบนเว็บเพื่อลดขนาดไฟล์โดยไม่ลดทอนคุณภาพ

เทคนิค Viewport ขั้นสูง

นอกเหนือจากพื้นฐานแล้ว ยังมีเทคนิคขั้นสูงบางอย่างที่คุณสามารถใช้เพื่อปรับแต่งการกำหนดค่า viewport ของคุณ:

การใช้หน่วย Viewport (vw, vh, vmin, vmax):
หน่วย Viewport เป็นหน่วยสัมพัทธ์กับขนาดของ viewport ตัวอย่างเช่น 1vw เท่ากับ 1% ของความกว้างของ viewport หน่วยเหล่านี้มีประโยชน์ในการสร้างเลย์เอาต์ที่ปรับขนาดตามสัดส่วนของขนาด viewport

ตัวอย่าง: width: 50vw; (ตั้งค่าความกว้างเป็น 50% ของความกว้างของ viewport)
การใช้ @viewport Rule (CSS at-rule):
@viewport CSS at-rule เป็นวิธีที่ละเอียดกว่าในการควบคุม viewport อย่างไรก็ตาม มันยังไม่ได้รับการสนับสนุนอย่างกว้างขวางเท่า meta tag ดังนั้นควรใช้อย่างระมัดระวังและเตรียม fallback (meta tag) สำหรับเบราว์เซอร์รุ่นเก่า

ตัวอย่าง:
@viewport { width: device-width; initial-scale: 1.0; }
การจัดการการวางแนวอุปกรณ์ที่แตกต่างกัน:
ใช้ CSS media queries เพื่อปรับเลย์เอาต์ของคุณตามการวางแนวของอุปกรณ์ (แนวตั้งหรือแนวนอน) สามารถใช้ media feature orientation เพื่อกำหนดเป้าหมายการวางแนวที่เฉพาะเจาะจง

ตัวอย่าง:
@media (orientation: portrait) { /* สไตล์สำหรับการวางแนวตั้ง */ } @media (orientation: landscape) { /* สไตล์สำหรับการวางแนวนอน */ }
การจัดการกับรอยบาก/พื้นที่ปลอดภัย (Notch/Safe Area) บน iPhone และอุปกรณ์ Android:
สมาร์ทโฟนสมัยใหม่มักมีรอยบากหรือมุมโค้งที่อาจบดบังเนื้อหา ใช้ตัวแปรสภาพแวดล้อมของ CSS (เช่น safe-area-inset-top, safe-area-inset-bottom, safe-area-inset-left, safe-area-inset-right) เพื่อคำนึงถึงพื้นที่ปลอดภัยเหล่านี้และป้องกันไม่ให้เนื้อหาถูกตัดออก

ตัวอย่าง:
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณได้ใส่ viewport meta tag ที่ถูกต้องเพื่อให้แน่ใจว่าตัวแปร `safe-area-inset-*` ถูกคำนวณอย่างถูกต้อง
การปรับให้เหมาะสมสำหรับอุปกรณ์พับได้:
อุปกรณ์พับได้นำเสนอความท้าทายที่ไม่เหมือนใครสำหรับ responsive design ใช้ CSS media queries กับ media feature screen-spanning (ซึ่งยังคงมีการพัฒนาอยู่) เพื่อตรวจจับเมื่อเว็บไซต์ของคุณทำงานบนอุปกรณ์พับได้และปรับเลย์เอาต์ตามนั้น พิจารณาใช้ JavaScript เพื่อตรวจจับสถานะการพับและปรับเลย์เอาต์แบบไดนามิก

ตัวอย่าง (แนวคิด เนื่องจากการสนับสนุนยังอยู่ในระหว่างการพัฒนา):
@media (screen-spanning: single-fold-horizontal) { /* สไตล์สำหรับเมื่อหน้าจอพับในแนวนอน */ } @media (screen-spanning: single-fold-vertical) { /* สไตล์สำหรับเมื่อหน้าจอพับในแนวตั้ง */ }

การทดสอบการกำหนดค่า Viewport ของคุณ

การทดสอบเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าการกำหนดค่า viewport ของคุณทำงานได้อย่างถูกต้อง นี่คือวิธีการทดสอบบางส่วน:

เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์ (Browser Developer Tools): ใช้ฟีเจอร์การจำลองอุปกรณ์ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์เพื่อจำลองขนาดหน้าจอและความละเอียดต่างๆ
อุปกรณ์จริง: ทดสอบบนอุปกรณ์จริงที่หลากหลาย (สมาร์ทโฟน, แท็บเล็ต) ที่มีขนาดหน้าจอและระบบปฏิบัติการที่แตกต่างกัน
เครื่องมือทดสอบออนไลน์: ใช้เครื่องมือออนไลน์ที่ให้ภาพหน้าจอของเว็บไซต์ของคุณบนอุปกรณ์ต่างๆ ตัวอย่างเช่น BrowserStack และ LambdaTest
การทดสอบโดยผู้ใช้ (User Testing): รับข้อเสนอแนะจากผู้ใช้จริงบนอุปกรณ์ต่างๆ เพื่อระบุปัญหาหรือจุดที่ต้องปรับปรุง

บทสรุป

CSS viewport meta tag เป็นเครื่องมือพื้นฐานสำหรับการสร้างเว็บไซต์ที่เป็นมิตรกับมือถือและตอบสนองได้ดี ด้วยการทำความเข้าใจคุณสมบัติและแนวทางปฏิบัติที่ดีที่สุด คุณสามารถมั่นใจได้ว่าเว็บไซต์ของคุณจะดูดีและทำงานได้อย่างไร้ที่ติบนอุปกรณ์ต่างๆ ทั่วโลก อย่าลืมใช้ viewport meta tag ร่วมกับ CSS media queries เพื่อสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้อย่างแท้จริงซึ่งมอบประสบการณ์ผู้ใช้ที่ดีที่สุดในทุกขนาดหน้าจอ และอย่าลืมทดสอบการกำหนดค่าของคุณอย่างละเอียดและให้ความสำคัญกับการเข้าถึงได้เพื่อสร้างเว็บไซต์ที่ครอบคลุมและทุกคนสามารถใช้งานได้