วิธีการทดสอบเว็บไซต์ Responsiveบน Smart phone ด้วย Chrome
วันนี้เราจะแนะนำวิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย
Chromeโดยในแต่ละครั้งในการออกแบบเว็บไซต์นั้น บางครั้งต้องการดูผลลัพธ์บนอุปกรณ์แท็บแล็ต หรือมือถือต่างๆ ซึ่งความละเอียดของหน้าจอนั้นๆจะแตกต่างกันออกไป ซึ่ง Chome จะมีเครื่องมือที่ช่วยให้แสดงผลบนอุปกรณ์ Smart phone โดยไม่ติดตั้งโปรแกรมเสริมใดๆเลย แถมวิธีการก็จะแสนง่ายดาย โดยมีวิธีการทดสอบดังนี้
1.ให้ไปที่ More tools
2.คลิก Doveloper tools ดังภาพ
- 2.png (227.09 KiB) Viewed 1059 times
3.เลือกที่รูปโทรศัพท์ ดังภาพ
- 3.png (129.18 KiB) Viewed 1059 times
4.ก็จะแสดงผลลัพธ์การทดสอบเว็บไซต์ Responsive บน smart phone
- 5.jpg (59.03 KiB) Viewed 1059 times
5.โดยเราสามารถเลือกการแสดงตามอุปกรณ์ที่ต้องการได้และสามารถเลือกแสดงเป็นแนวนอนหรือแนวตั้งได้
- 6.png (70.6 KiB) Viewed 1059 times
ตัวอย่างการแสดงผลบนอุปกรณ์ I-PHONE6 แนวนอน
www.mindphp.com
- 7.jpg (52.74 KiB) Viewed 1058 times
:like: [b]วิธีการทดสอบเว็บไซต์ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2604-responsive-web-design.html?hitcount=0&bb_limitstart=180]Responsive[/url]บน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2389-smartphone-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Smart phone[/url] ด้วย Chrome[/b] :like:
วันนี้เราจะแนะนำวิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/google-for-work/3773-google-chrome-%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5-%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%A1.html]Chrome[/url]โดยในแต่ละครั้งในการออกแบบเว็บไซต์นั้น บางครั้งต้องการดูผลลัพธ์บนอุปกรณ์แท็บแล็ต หรือมือถือต่างๆ ซึ่งความละเอียดของหน้าจอนั้นๆจะแตกต่างกันออกไป ซึ่ง Chome จะมีเครื่องมือที่ช่วยให้แสดงผลบนอุปกรณ์ Smart phone โดยไม่ติดตั้งโปรแกรมเสริมใดๆเลย แถมวิธีการก็จะแสนง่ายดาย โดยมีวิธีการทดสอบดังนี้
1.ให้ไปที่ More tools
2.คลิก Doveloper tools ดังภาพ
[attachment=4]2.png[/attachment]
3.เลือกที่รูปโทรศัพท์ ดังภาพ
[attachment=3]3.png[/attachment]
4.ก็จะแสดงผลลัพธ์การทดสอบเว็บไซต์ Responsive บน smart phone
[attachment=2]5.jpg[/attachment]
5.โดยเราสามารถเลือกการแสดงตามอุปกรณ์ที่ต้องการได้และสามารถเลือกแสดงเป็นแนวนอนหรือแนวตั้งได้
[attachment=1]6.png[/attachment]
ตัวอย่างการแสดงผลบนอุปกรณ์ I-PHONE6 แนวนอน [url=https://www.mindphp.com/]www.mindphp.com[/url]
[attachment=0]7.jpg[/attachment]