หลุมพราง Responsive

ลืม viewport meta

media query ดูเหมือนไม่ทำงานบนมือถือจริง — เช็ค head ก่อนโทษ CSS

ความกว้างคงที่ทั้งหน้า

width: 1200px บน container หลักทำให้มือถือเลื่อนข้างเสมอ — ใช้ max-width + ความกว้างเป็น % หรือกริดแทน

/* เสี่ยงบนมือถือ */
.wrap { width: 1200px; }

/* ยืดหยุ่นกว่า */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

Breakpoint เยอะเกินและซ้ำเงื่อนไข

กฎทับกันยากดีบัก — รวมจุดเปลี่ยนให้เหลือเท่าที่เนื้อหาต้องการ