วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pnut
PHP Super Member
PHP Super Member
โพสต์: 488
ลงทะเบียนเมื่อ: 08/08/2016 10:48 am

วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

โพสต์โดย pnut » 12/10/2016 12:24 pm

:like: วิธีการทดสอบเว็บไซต์ Responsiveบน Smart phone ด้วย Chrome :like:
วันนี้เราจะแนะนำวิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chromeโดยในแต่ละครั้งในการออกแบบเว็บไซต์นั้น บางครั้งต้องการดูผลลัพธ์บนอุปกรณ์แท็บแล็ต หรือมือถือต่างๆ ซึ่งความละเอียดของหน้าจอนั้นๆจะแตกต่างกันออกไป ซึ่ง Chome จะมีเครื่องมือที่ช่วยให้แสดงผลบนอุปกรณ์ Smart phone โดยไม่ติดตั้งโปรแกรมเสริมใดๆเลย แถมวิธีการก็จะแสนง่ายดาย โดยมีวิธีการทดสอบดังนี้
1.ให้ไปที่ More tools
2.คลิก Doveloper tools ดังภาพ
2.png
2.png (227.09 KiB) เปิดดู 273 ครั้ง

3.เลือกที่รูปโทรศัพท์ ดังภาพ
3.png
3.png (129.18 KiB) เปิดดู 273 ครั้ง

4.ก็จะแสดงผลลัพธ์การทดสอบเว็บไซต์ Responsive บน smart phone
5.jpg
5.jpg (59.03 KiB) เปิดดู 273 ครั้ง

5.โดยเราสามารถเลือกการแสดงตามอุปกรณ์ที่ต้องการได้และสามารถเลือกแสดงเป็นแนวนอนหรือแนวตั้งได้
6.png
6.png (70.6 KiB) เปิดดู 273 ครั้ง


ตัวอย่างการแสดงผลบนอุปกรณ์ I-PHONE6 แนวนอน www.mindphp.com
7.jpg
7.jpg (52.74 KiB) เปิดดู 272 ครั้ง

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน