การออกแบบเว็บไซต์ให้รองรับกับ Device ที่หลากหลาย (Responsive Web Design) กำลังได้รับความนิยมในปัจจุบัน เพราะไม่ว่าจะแสดงผลด้วย Device ไหน เว็บก็ยังสามารถแสดงผลได้อย่างถูกต้องและสวยงาม ซึ่งการจะทำให้เว็บรองรับ Device ที่หลากหลายนั้น จำเป็นจะต้องมีการแยกเคสของแต่ละ Device ว่าขนาดหน้าจอเท่านี้ๆ จะให้มี styles อย่างไรบ้าง
1 2 3 | @media only screen and (max-width: 480px) { /* Styles */ } |
จากตัวอย่างด้านบน Styles จะถูกเรียกใช้หาก Device นั้นๆ มีความกว้างของหน้าจอไม่เกิน 480px ครับ
รู้จักกับ Viewport และ Orientation
width จะอ้างอิงถึงความกว้างของ Viewport ครับ ซึ่งก็คือขนาดของการเรนเดอร์หน้าเว็บในขณะนั้นๆ เช่น ถ้าเราเปิดเว็บแบบ Fullscreen ความกว้างของ Viewport จะเท่ากับความกว้างของจอเราครับ (กรณีไม่มี Scrollbar) แต่ถ้าเราเปิดหน้าเว็บแบบไม่ Fullscreen ความกว้างของ Viewport จะเท่ากับความกว้างของหน้าต่าง Web Browser ที่เราเปิดอยู่ครับ
Orientation หรือการวางแนวของการแสดงผลของ Device ต่างๆ นั่นเองครับ ยกตัวอย่างเช่น iPhone ซึ่งมีการแสดงผลที่ขนาด 320 x 480 เมื่อ Orientation เป็นแนวตั้ง หรือ Portrait จะมี width เป็น 320px แต่ถ้า Orientation เป็นแนวนอน หรือ Landscape จะมี width เป็น 480px ครับ
แล้ว device-width คืออะไร?
device-width คือความกว้างของตัว Device เองครับ หรือพูดง่ายๆ ก็คือ Resolution ของ Device นั้นๆ นั่นเองครับ ซึ่งค่านี้จะไม่เปลี่ยนแปลงไปตาม Viewport แต่จะเปลี่ยนไปตาม Orientation ยกเว้น iPhone และ iPad ที่ยังเป็นค่าเดิมเสมอ ยกตัวอย่างเช่น iPhone ที่มี Resolution 320 x 480 ก็จะมี device-width เป็น 320 และ device-height เป็น 480 ทั้ง 2 Orientation ครับ
ชีวิตลำบากขึ้น เมื่อ device-width ไม่เท่ากับ Resolution เสมอไป !
ในปัจจุบัน Smart Phone หลายๆ รุ่น มี Resolution มากกว่า device-width ทั้งนี้ เป็นเพราะการอัด Pixel เข้าไปให้มากขึ้น ในขณะที่ขนาดหน้าจอยังเท่าเดิม เพื่อเพิ่มความคมชัดให้กับหน้าจอ ดังตารางนี้ครับ
| Device | Resolution | device-width/ device-height |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480 (portrait & landscape) |
| iPhone 4 | 640 x 960 | 320 x 480 (portrait & landscape) |
| iPad 1 and 2 | 768 x 1024 | 768 x 1024 (portrait & landscape) |
| iPad 3 | 1536 x 2048 | 768 x 1024 (portrait & landscape) |
| Samsung Galaxy S I and II | 480 x 800 | 320 x 533 (portrait), 553 x 320 (landscape) |
| Samsung Galaxy S III | 720 x 1280 | 360 x 640 (portrait), 640 x 360 (landscape) |
ใช้ orientation, device-width และ device-pixel-ratio ให้เป็นประโยชน์
จากที่กล่าวมาทั้งหมด จะเห็นได้ว่า width ไม่เพียงพอในการตรวจสอบว่า device นั้นเป็นแบบไหน ทางที่ดีคือ ให้เราใช้ device-width ร่วมกับ orientation หรือ device-pixel-ratio มาเช็กร่วมกันดังตัวอย่างนี้ครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* #### iPhone Portrait or Landscape #### */ @media screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5){ /* some CSS here */ } /* #### Mobile Phones Portrait #### */ @media screen and (max-device-width: 320px) and (orientation: portrait){ /* some CSS here */ } /* #### Mobile Phones Landscape #### */ @media screen and (max-device-width: 640px) and (orientation: landscape){ /* some CSS here */ } /* #### Tablets Portrait or Landscape #### */ @media screen and (min-device-width: 768px) and (max-device-width: 1024px){ /* some CSS here */ } |
จริงๆ แล้ว ตัวอย่างที่ผมยกมา ไม่ได้มีหลักการตายตัวว่าจะต้องเขียนเคสแบบนี้ตลอด ซึ่งเราควรปรับให้เหมาะสมกับงานแต่ละงาน และ Device ต่างๆ ที่มีการพัฒนาเปลี่ยนแปลงอยู่ตลอดเวลาครับ