width VS device-width ใน Responsive Web Design

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

DeviceResolutiondevice-width/ device-height
iPhone320 x 480320 x 480 (portrait & landscape)
iPhone 4640 x 960320 x 480 (portrait & landscape)
iPad 1 and 2768 x 1024768 x 1024 (portrait & landscape)
iPad 31536 x 2048768 x 1024 (portrait & landscape)
Samsung Galaxy S I and II480 x 800320 x 533 (portrait), 553 x 320 (landscape)
Samsung Galaxy S III720 x 1280360 x 640 (portrait), 640 x 360 (landscape)

ใช้ orientation, device-width และ device-pixel-ratio ให้เป็นประโยชน์

จากที่กล่าวมาทั้งหมด จะเห็นได้ว่า width ไม่เพียงพอในการตรวจสอบว่า device นั้นเป็นแบบไหน ทางที่ดีคือ ให้เราใช้ device-width ร่วมกับ orientation หรือ device-pixel-ratio มาเช็กร่วมกันดังตัวอย่างนี้ครับ

จริงๆ แล้ว ตัวอย่างที่ผมยกมา ไม่ได้มีหลักการตายตัวว่าจะต้องเขียนเคสแบบนี้ตลอด ซึ่งเราควรปรับให้เหมาะสมกับงานแต่ละงาน และ Device ต่างๆ ที่มีการพัฒนาเปลี่ยนแปลงอยู่ตลอดเวลาครับ

(Visited 6,376 times, 2 visits today)

5 Responses to “width VS device-width ใน Responsive Web Design”

  1. Php Basic says:

    ถ้าอยากจะเริ่มเขียน css Responsive Web ผมต้องเริ่มยังได้ดีครับ มีไกด์ไลน์ตั้งแต่เริ่มเลยไหมครับ

  2. บอล says:

    รบกวนสอบถามหน่อยครับ เราจะมีวิธีหาค่าของ Device Width กับ Device Height อย่างไรครับ

    • Siam HTML says:

      มี tool ช่วยหานะครับ
      http://atmedia.info/

      แต่ถ้าจะเขียนโค้ดหาเองก็ทำได้ครับ
      ให้ใช้ object ของ js ที่ชื่อ window.devicePixelRatio

      เพื่อหาอัตราส่วนระหว่าง width กับ device-width มาก่อนครับ
      ถ้าได้ค่าเป็น 1 แสดงว่า width เท่ากับ device-width ครับ
      แต่ถ้าได้เป็น 2 ก็แสดงว่า width มีค่าเป็น 2 เท่าของ device-width ครับ

  3. ขอบคูณนะครับสำหรับข้อมูลที่ดีๆแบบนี้
    เป็นกำลังใจให้ทำต่อไปนะครับ

  4. ขอบคุณครับ

Leave a Reply