ทดสอบเว็บ Responsive ง่ายๆ ฟรีๆ กับ Firefox

ช่วงนี้กระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) กำลังเป็นกระแสการออกแบบเว็บสมัยใหม่เนืองจากกการออกแบบแบบนี้ ออกแบบครั้งเดียว สามารถดูได้ทั้งแบบ desktop แท็บเล็ท และมือถือ แต่ระหว่างการออกแบบอยู่เราจะทดสอบได้ยังไงล่ะว่า ถ้าความละเอียดแบบ 800×600 มันเป็นยังไง ความละเอียด 320×240 หน้าตาจะเป็นแบบไหน

ซึ่ง Firefox 15 ขึ้นไป มีเครื่องมือที่ชื่อว่ามุมมองการออกแบบเชิงตอบสนองหรือ Responsive Design View มาให้ในตัวโดยไม่ต้องโหลดเพิ่มมาแต่ประการใด วิธีการเปิดก็ง่าๆ แค่ คลิกที่ปุ่ม Firefox -> นักพัฒนาเว็บ -> มุมมองการออกแบบเชิงตอบสนอง หรือ ถ้าเราเปิดแถบเครื่องมืออยู่แล้วก็คลิกที่ปุ่มได้เลย

เปิดเอาจากปุ่ม Firefox

เปิดเอาจากปุ่ม Firefox

คลิกที่ปุ่มในแถบเครื่องมือนักพัฒนาเว็บก็ได้

คลิกที่ปุ่มในแถบเครื่องมือนักพัฒนาเว็บก็ได้

คลิกปุ๊บหน้าตาก็เป็นแบบนี้ ยืดหดหรือเพิ่ม preset ได้ตามสบายเลย ง่ายๆ ไม่มีอะไรยาก



(โหมดขายของ) แต่เดี๋ยวก่อน! ถ้าท่านโทรเข้ามาภายใน 10 นาทีนี้ พอดีเห็นว่าตัว presets ของเครื่องมือตัวนี้มีมาให้ยังไม่สะใจพอ แถม Firefox ก็เปิดโอการให้เพิ่มเองได้ ผมก็เลยใช้ไปหาข้อมูลของความละเอียดหน้าจอของแต่ละอุปกรณ์มา และทำเป็นส่วนขยายที่ชื่อว่า More Display Resolutions มาเพิ่ม presets เข้าไปซะ แค่นี้เราก็ทดสอบหน้าเว็บเชิงตอบสนองของเกือบทุกขนาดหน้าจอได้ภายใน Firefox ตัวเดียวครับผม…

More Display Resolutions ช่วยเพิ่ม presets ของหน้าจอที่ใช้ในปัจจุบัน

More Display Resolutions ช่วยเพิ่ม presets ของหน้าจอที่ใช้ในปัจจุบัน

 

No responses yet

Post a comment

  1. Pingback from เครื่องมือนักพัฒนาของ Firefox | Mozilla Thailand Community on ::

    […] มุมมองการออกแบบเชิงตอบสนอง (Responsive Design Vi… […]

    ตอบกลับ

  2. กิตติโชค wrote on :

    ขอบคุณที่แนะนำครับ

    ตอบกลับ

ส่งความคิดเห็น