Tech Blog

การเลือกไม่รวม Desktop และ Mobile ด้วย Responsive CSS และวิธีการตรวจสอบ

by Tech Writer
Vue3 CSS Frontend Responsive

บทนำ

เมื่อสร้าง UI แนวคิด “เขียน @media ใน CSS แล้วจัดการ desktop และ mobile ในที่เดียว” เป็นเรื่องปกติ

อย่างไรก็ตาม แอพนี้ใช้แนวทาง ไม่ใช้ @media-based responsive CSS แต่ออกแบบ desktop และ mobile screens เป็นไฟล์แยกกันอย่างสมบูรณ์

บทความนี้บันทึกว่าทำไมเราเลือกแนวทางนั้น และวิธีการตรวจสอบแต่ละส่วน

หน้าจอรายชื่อภาพยนตร์ (เวอร์ชัน desktop)

ทำไมเราไม่ “รวมด้วย @media”

① Desktop และ Mobile มี “สิ่งที่ต้องการแสดงและโต้ตอบ” ต่างกัน

Desktop สามารถเพิ่ม information density ด้วย fixed-width layout
Mobile ให้ความสำคัญกับ tap operations ก่อน ไหลเนื้อหาใน single column

ความแตกต่างนี้ไม่สามารถแก้ได้ด้วยการ “เปลี่ยนความกว้างด้วย CSS” เพียงอย่างเดียว โครงสร้าง component ลำดับ element และขนาดปุ่ม — ทุกอย่างเปลี่ยน

การพยายามเปลี่ยนเฉพาะรูปลักษณ์ของ HTML เดียวกันด้วย @media มักสร้างหน้าจอที่ไม่ได้ optimize สำหรับ desktop หรือ mobile

② การเพิ่ม “Mobile Support” ทีหลังทำให้ CSS เปราะบาง

แนวทางการเพิ่ม @media ทีหลังให้กับ components ที่สร้างสำหรับ desktop นำไปสู่ CSS overrides ที่ซับซ้อน เพิ่มความเสี่ยงในการทำลาย desktop layout

③ การ Test และ Review มักจะ “ตรวจสอบแค่ด้านเดียว”

เมื่อ desktop และ mobile styles ผสมกันในไฟล์เดียว การแก้ไขด้านหนึ่งมักทำให้อีกด้านพังโดยไม่สังเกตเห็น

นโยบายของแอพนี้

เป้าหมายนโยบาย
Desktop screensกำลังทำงานอยู่ FilmsView.vue, FilmDetailView.vue ฯลฯ — ออกแบบเฉพาะ desktop
Mobile screensจะ implement เป็น separate components และ separate files ในอนาคต

ห้าม:

  • เพิ่ม @media ให้ desktop components ที่มีอยู่ภายหลัง
  • ใช้ Bootstrap หรือ Tailwind’s “two birds with one stone responsive support”
  • ตรวจสอบ desktop และ mobile ในไฟล์เดียวกัน

ขั้นตอนการตรวจสอบ Desktop Screen

1. เปิด Chrome DevTools ใน Desktop Mode

1. F12 (เปิด DevTools)
2. ยืนยันว่า device toolbar (ไอคอนโทรศัพท์) เป็น OFF
3. รักษาความกว้าง window ไว้ที่ 1200px หรือมากกว่า

อย่าสลับไปยัง Responsive mode (mobile simulator ของ DevTools)
Desktop components ควรตรวจสอบที่ desktop width

2. Operate และตรวจสอบแต่ละหน้าจอหลักตามลำดับ

  • รายชื่อภาพยนตร์ (ทั้ง sidebar ขยายและพับ)
  • รายละเอียดภาพยนตร์ (image fallback, video playback)
  • Login และ member registration flow
  • My Page, rental history, payment history
  • Payment flow (normal header สลับเป็น Isolated Checkout header)

3. ตรวจสอบโดยเปลี่ยน Authentication State

ยังไม่ login → ดูรายชื่อภาพยนตร์ → รายละเอียด → Login → ไปยัง My Page
Login แล้ว → My Page → History → Payment flow

ตรวจสอบว่า layout สลับอย่างถูกต้องก่อนและหลัง login

// App.vue (implementation สลับการแสดง tab ตาม auth state)
<a
  v-if="!isAuthenticated"
  @click="currentPage = 'auth'"
>
  Login / Register
</a>
<a
  v-else
  @click="currentPage = 'mypage'"
>
  My Page
</a>

ขั้นตอนการตรวจสอบ Mobile Screen (เมื่อ Implement ในอนาคต)

Mobile screens จะถูกสร้างเป็น separate components และ separate files จาก desktop
การตรวจสอบก็จะแยกกันอย่างสมบูรณ์

❌ ตรวจสอบ desktop components ใน Responsive mode ของ Chrome DevTools
✅ ตรวจสอบ mobile-specific components บน actual device หรือ Chrome DevTools mobile simulator

การตรวจสอบความกว้างหน้าจอใน Vue 3 (อ้างอิง: ตั้งใจใช้สำหรับ Mobile Implementation ในอนาคต)

เมื่อสร้าง mobile-specific components บางครั้งอาจต้องการการตรวจสอบความกว้างหน้าจอด้วย JS
สิ่งนี้ใช้สำหรับ “การเริ่มต้น mobile-specific component” เท่านั้น ไม่ใช่สำหรับผสมเข้าไปใน desktop components

// กำหนด initial sidebar state ตามความกว้างหน้าจอ (ตัวอย่าง: desktop-only component)
const isSidebarOpen = ref(window.innerWidth > 991)

// กำหนดความกว้างหน้าจอด้วย matchMedia (อ้างอิงสำหรับ mobile-specific components ในอนาคต)
const isMobile = window.matchMedia('(max-width: 991px)').matches

สรุป

นโยบายของแอพนี้:

❌ เขียน @media เพื่อรวม desktop และ mobile support ในที่เดียว
❌ ใช้ responsive grid ของ Bootstrap เพื่อ "two birds with one stone"
❌ เพิ่ม @media ให้ desktop components ที่มีอยู่ภายหลัง

✅ ออกแบบ desktop และ mobile screens เป็น separate files ตั้งแต่แรก
✅ ตรวจสอบ desktop ที่ desktop width, ตรวจสอบ mobile ด้วยวิธีเฉพาะ mobile
✅ แยก implementation timing ของทั้งสองให้เป็นอิสระ

การตัดสินใจคือ “ออกแบบเป็น separate screens ตั้งแต่แรก” แทนที่จะเป็น “เขียน @media = รองรับทั้งหมดแล้ว”

นโยบายการออกแบบของแอพนี้: สร้าง Mobile-Specific Screens แยกต่างหากแทนที่จะเป็น Responsive

แอพ DVD rental นี้ ไม่ใช้ responsive design

นโยบายที่เลือกใช้

รายการเนื้อหา
PC screenFixed width 1240px (min-width: 1240px), horizontal scroll operation
Mobile screenจะถูกสร้างแยกต่างหากเป็น mobile-specific component ภายในแอพเดียวกัน
Featuresทั้ง PC และ mobile screens มี features เทียบเท่ากัน
@media queriesโดยพื้นฐานไม่รวมไว้ใน PC components
/* App.vue: PC screen ด้วย fixed width และ horizontal scroll support */
.page-shell {
  min-width: 1240px;  /* แม้ความกว้างจะลด ก็ยังเข้าถึง right edge ด้วย horizontal scroll */
}

แทนที่จะซ่อน right edge ด้วย overflow-x: hidden การออกแบบรักษาความสามารถในการเข้าถึง right column ผ่าน horizontal scroll

ทำไมไม่ Responsive?

แนวทาง responsive ที่แนะนำในบทความนี้คือเรื่อง “จัดการ devices ทั้งหมดด้วย component เดียว”
ในทางกลับกัน เนื่องจาก information density, operation style และ layout policy แตกต่างกันอย่างมีนัยสำคัญระหว่าง PC และ mobile ในโปรเจกต์นี้
แทนที่จะเพิ่ม @media ให้ component เดียวกันทีหลัง เราเลือก ออกแบบ mobile-specific components แยกต่างหาก

การตัดสินใจนี้ตามแนวคิดเดียวกับที่ e-commerce services เช่น Amazon, Rakuten และ DMM
ออกแบบ PC และ mobile เป็น UI ที่แยกกันอย่างสมบูรณ์

สรุป

Checklist ที่แนะนำในบทความนี้ครอบคลุม “verification items เมื่อทำ code เดียวให้ responsive”
เมื่อใช้นโยบายการออกแบบ “สร้าง dedicated screen แยกสำหรับ mobile” scope ของ checklist นี้ใช้กับการพัฒนา mobile-specific component

แผนที่บทความของ Series นี้

→ การสร้างแอพ DVD Rental สำหรับผู้ใช้ควบคู่กับหน้าจัดการ — ภาพรวมโครงสร้าง Vue 3 + Spring Boot

ส่งข้อความได้ตามสบาย

กรุณาส่งข้อความ หากมีคำปรึกษาด้านเทคนิค ความคิดเห็น หรือคำถาม