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

<h2>วิธีดู Responsive Design ของแต่ละ Browser<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีดู Responsive Design ของแต่ละ Browser<&sol;strong><br &sol;>&NewLine;ปัจจุบันการทำเว็บไซต์ให้รองรับการแสดงผลได้ดีในทุกขนาดหน้าจอเป็นเรื่องที่จำเป็นและสำคัญมาก การทำเว็บไซต์ให้ดูดีทั้งบน Desktop Computer และในทุก ๆ Mobile Device มีผลทั้งทางตรงและทางอ้อมกับการทำ SEO <&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;หลักการเดียวกันกับที่ ทำไมเราถึงจำเป็นต้องใช้ facebook instant article เพื่อเผยแพร่บทความลง facebook ทำไมการแชร์ลิงค์ออกไปตรง ๆ ถึงสู้การเผยแพร่ผ่าน instant article ไม่ได้ นั้นก็เพราะว่า ระบบของ instant article ได้ออกแบบมาเพื่อปรับการแสดงผลบทความของเรา ให้สามารถแสดงผลได้อย่างสมบูรณ์บนทุก ๆ device เมื่อมีการคลิกอ่าน<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;ในขั้นตอนของการพัฒนาเว็บไซต์ หรือการทดสอบการแสดงผล เราสามารถใช้ความสามารถที่ติดมากับแต่ละ browser เพื่อจะตรวจสอบว่า เว็บไซต์ของเรานั้นจะมีหน้าตาอย่างไรเมื่ออยู่บนอุปกรณ์ที่แตกต่างกัน โดยที่ไม่ต้องใช้มือถือหรืออุปกรณ์สมาร์ทโฟนจริง ๆ มาทดสอบ ซึ่งเป็นเรื่องยากมากที่จะสามารถทำแบบนั้นได้<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีดูเว็บไซต์ในขนาดหน้าจอที่แตกต่างกันใน Safari&comma; Google Chrome และ Firefox<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>วิธีดูใน Safari Browser<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;1&period; ไป Safari -> Preferences -> Advanced และติ๊กถูกที่ช่อง <strong>&&num;8220&semi;Show Develop menu in menu bar&&num;8221&semi;<&sol;strong><br &sol;>&NewLine;2&period; จะปรากฏเมนูบาร์ชื่อว่า &&num;8220&semi;Develop&&num;8221&semi; ขึ้นมาให้เลือกไปที่เมนู Develop -> Enter Responsive Design Mode<br &sol;>&NewLine;3&period; จะปรากฏหน้าจอดังรูปด้านล่าง ให้เราสามารถปรับขนาดตามอุปกรณ์ที่แตกต่างกันได้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img width&equals;"600" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;safari-responsive-design-mode&period;png" alt&equals;"safari-responsive-design-mode" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li><strong>วิธีดูใน Google Chrome Browser<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;1&period; ไปที่ไอคอนรูปดอทมุมขวามือ -> More tools -> Developer tools จะปรากฏหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บไซต์ขึ้นมา ให้คลิกไปที่เครื่องหมายไอคอน responsive ดังรูป<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<img width&equals;"600" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;google-chrome-responsive-design-mode-2&period;png" alt&equals;"google-chrome-responsive-design-mode" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;2&period; เลือกปรับขนาดความกว้างและความสูง หรือเลือกขนาดตั้นแบบอย่าง iPhone&comma; iPad เป็นต้น เพื่อทดสอบการแสดงผลในขนาดที่แตกต่างกัน<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img width&equals;"600" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;google-chrome-responsive-design-mode&period;png" alt&equals;"google-chrome-responsive-design-mode" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li><strong>วิธีดูใน Firefox Browser<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;1&period; ไปที่ไอคอน Hamberger menu -> Developer -> Responsive Design Mode จะปรากฏหน้าจอตัวเลือกสำหรับปรับรูปแบบการแสดงผลของแต่ละ device ทันที<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<img width&equals;"600" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;firefox-responsive-design-mode&period;png" alt&equals;"firefox-responsive-design-mode" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;