safari-responsive-design-mode

วิธีดู Responsive Design ของแต่ละ Browser

วิธีดู Responsive Design ของแต่ละ Browser



วิธีดู Responsive Design ของแต่ละ Browser
ปัจจุบันการทำเว็บไซต์ให้รองรับการแสดงผลได้ดีในทุกขนาดหน้าจอเป็นเรื่องที่จำเป็นและสำคัญมาก การทำเว็บไซต์ให้ดูดีทั้งบน Desktop Computer และในทุก ๆ Mobile Device มีผลทั้งทางตรงและทางอ้อมกับการทำ SEO



หลักการเดียวกันกับที่ ทำไมเราถึงจำเป็นต้องใช้ facebook instant article เพื่อเผยแพร่บทความลง facebook ทำไมการแชร์ลิงค์ออกไปตรง ๆ ถึงสู้การเผยแพร่ผ่าน instant article ไม่ได้ นั้นก็เพราะว่า ระบบของ instant article ได้ออกแบบมาเพื่อปรับการแสดงผลบทความของเรา ให้สามารถแสดงผลได้อย่างสมบูรณ์บนทุก ๆ device เมื่อมีการคลิกอ่าน


ในขั้นตอนของการพัฒนาเว็บไซต์ หรือการทดสอบการแสดงผล เราสามารถใช้ความสามารถที่ติดมากับแต่ละ browser เพื่อจะตรวจสอบว่า เว็บไซต์ของเรานั้นจะมีหน้าตาอย่างไรเมื่ออยู่บนอุปกรณ์ที่แตกต่างกัน โดยที่ไม่ต้องใช้มือถือหรืออุปกรณ์สมาร์ทโฟนจริง ๆ มาทดสอบ ซึ่งเป็นเรื่องยากมากที่จะสามารถทำแบบนั้นได้

วิธีดูเว็บไซต์ในขนาดหน้าจอที่แตกต่างกันใน Safari, Google Chrome และ Firefox

  • วิธีดูใน Safari Browser


    1. ไป Safari -> Preferences -> Advanced และติ๊กถูกที่ช่อง “Show Develop menu in menu bar”
    2. จะปรากฏเมนูบาร์ชื่อว่า “Develop” ขึ้นมาให้เลือกไปที่เมนู Develop -> Enter Responsive Design Mode
    3. จะปรากฏหน้าจอดังรูปด้านล่าง ให้เราสามารถปรับขนาดตามอุปกรณ์ที่แตกต่างกันได้


    safari-responsive-design-mode

  • วิธีดูใน Google Chrome Browser


    1. ไปที่ไอคอนรูปดอทมุมขวามือ -> More tools -> Developer tools จะปรากฏหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บไซต์ขึ้นมา ให้คลิกไปที่เครื่องหมายไอคอน responsive ดังรูป



    google-chrome-responsive-design-mode


    2. เลือกปรับขนาดความกว้างและความสูง หรือเลือกขนาดตั้นแบบอย่าง iPhone, iPad เป็นต้น เพื่อทดสอบการแสดงผลในขนาดที่แตกต่างกัน


    google-chrome-responsive-design-mode

  • วิธีดูใน Firefox Browser


    1. ไปที่ไอคอน Hamberger menu -> Developer -> Responsive Design Mode จะปรากฏหน้าจอตัวเลือกสำหรับปรับรูปแบบการแสดงผลของแต่ละ device ทันที



    firefox-responsive-design-mode

กระทู้ใกล้เคียง

Responsive Website คืออะไร ตัวอย่างและประโยชน์... Responsive Website คืออะไร ตัวอย่างและประโยชน์ Responsive Website คืออะไร คือแนวทางการพัฒนาเว็บไซต์โดยเริ่มตั้งแต่การออกแบบ ไปจนถึงการเขียนโปรแกรม ...
ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ใ... ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ให้คิดเองได้ ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ให้คิดเองได้ Machine Learning ในท...
เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ... เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ปลั๊กอิน เฟรมเวิร์ค อะไร เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ปลั๊กอิน เฟรมเวิร์ค อะ...
วิธี re-crawl เว็บไซต์ บอกให้ google มาเก็บข้อมูลเ... วิธี re-crawl เว็บไซต์ บอกให้ google มาเก็บข้อมูลเว็บซ้ำอีกรอบ วิธี re-crawl เว็บไซต์ การ re-crawl เว็บไซต์ คือการบอกให้ Search Engine ต่าง ๆ มารว...