ใครที่ทำเว็บที่รองรับ Responsive อยู่คงจะเคยหาเครื่องมือต่างๆมาลองทดสอบเว็บตัวเอง
แต่วันนี้ผมมีวิธีทดสอบง่ายๆ รวดเร็วไม่ต้องใช้เครื่องมือใดๆ แต่อาจจะไม่ละเอียดลึกพอ แต่ก็ดูได้พอทน เอ๊ะยังไง งงๆ
ง่ายๆ เลยแค่กดปุ่ม ย่อ ขนาดบราวเซอร์แล้วก็ลากขนาดบราวเซอร์ดู แค่นี้ก็จะเห็นผลได้ระดับนึงแล้วครับ ใครที่รู้แล้วก็ผ่านไปได้เลยครับ มาบอกไว้เผื่อคนไหนยังไม่รู้ครับ
ยกตัวอย่างเว็บตัวเองเลยละกัน
(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xaf1/t1.0-9/10527762_545536428902840_9103610303513058462_n.jpg)
(https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/10559842_545536438902839_973311774623602546_n.jpg)
(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xpf1/t1.0-9/10544375_545536442236172_5608970346134115867_n.jpg)
(https://scontent-b-sin.xx.fbcdn.net/hphotos-xpf1/t1.0-9/10559912_545536478902835_5189462480815266920_n.jpg)
(https://scontent-b-sin.xx.fbcdn.net/hphotos-xpa1/t1.0-9/10354066_545536505569499_7909421170587734837_n.jpg)
จะเห็นได้ว่าจะตอบสนอง responsive ดี จะไม่มี scrollbar ด้านล่างครับ
หวังว่าคงมีประโยชน์บ้างไม่มากก็น้อยครับ :wanwan016: :wanwan016:
สิ้นค่าน่าสนใจครับ เดี่ยวเข้าไปดู
ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ
ปกติผมก็ใช้เหมือนท่านครับ ตอนนี้ก็ยังใช้อยู่ครับ แต่ผมจะลองตัวนี้อีกตัวครับ http://responsivetest.net/#u=http://www.ipostproperty.com/shop
อ้างถึงจาก: adidog ใน 18 กรกฎาคม 2014, 16:12:57
ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ
ได้มาอีกอย่าง ขอบคุณมากครับ เพิ่งรู้ว่ามีนะครับเนี้ย :wanwan017:
ต้องลอง :wanwan017:
ขอบคุณครับ :wanwan011:
เช็คแล้ว โอเคเลยครับ :wanwan020: :wanwan020:
ผมก็ใช้วิธี้ครับ แต่จะลองกะทุกๆ browser และก็เอามาลองบนทั้ง Smart phone / tablet เพื่อความแน่ใจครับ :wanwan017:
อ้างถึงจาก: adidog ใน 18 กรกฎาคม 2014, 16:12:57
ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ
โอ้ ความรู้ใหม่ :wanwan017:
ส่วนตัวใช้เหมือนเจ้าของกระทู้ครับ :-[
สุดยอด เพิ่งรู้เหมือนกันครับ :wanwan017:
อ้างถึงจาก: zero1150kfc ใน 18 กรกฎาคม 2014, 16:58:04
อ้างถึงจาก: adidog ใน 18 กรกฎาคม 2014, 16:12:57
ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ
โอ้ ความรู้ใหม่ :wanwan017:
ส่วนตัวใช้เหมือนเจ้าของกระทู้ครับ :-[
โอ้วความรู้ใหม่ ขอบคุณครับ :wanwan017:
ขออนุญาตเจ้าของกระทู้นะครับ
ส่วนตัวใช้ Google Chrome กด F12 เลือกแท๊บ Emulation เมนูด้านซ้ายเลือก Device แล้วเลือกอุปกรณ์ที่ต้องการ กดปุ่ม Emulate หากต้องการยกเลิกกด Reset ครับ
(http://a.lnwpic.com/jinsfb.png)
อ้างถึงจาก: max30012540 ใน 18 กรกฎาคม 2014, 18:54:52
ขออนุญาตเจ้าของกระทู้นะครับ
ส่วนตัวใช้ Google Chrome กด F12 เลือกแท๊บ Emulation เมนูด้านซ้ายเลือก Device แล้วเลือกอุปกรณ์ที่ต้องการ กดปุ่ม Emulate หากต้องการยกเลิกกด Reset ครับ
(http://a.lnwpic.com/jinsfb.png)
วิธีนี้แสดงผลไม่ถูกต้องครับ แค่ได้สัดส่วนหน้าจอเฉยๆ แต่ไม่แสดงผล Responsive ที่แท้จริง
ผมใช้โครมแล้ว กดปุ่ม CTRL ค้างไว้แล้วเลื่อน Scroll ไปที่ขนาด 300% (สำหรับไอโฟน5)
ถึงจะแสดงผลได้ถูกต้องครับ
อ้างถึงจาก: toekingsize ใน 18 กรกฎาคม 2014, 19:06:51
อ้างถึงจาก: max30012540 ใน 18 กรกฎาคม 2014, 18:54:52
ขออนุญาตเจ้าของกระทู้นะครับ
ส่วนตัวใช้ Google Chrome กด F12 เลือกแท๊บ Emulation เมนูด้านซ้ายเลือก Device แล้วเลือกอุปกรณ์ที่ต้องการ กดปุ่ม Emulate หากต้องการยกเลิกกด Reset ครับ
(http://a.lnwpic.com/jinsfb.png)
วิธีนี้แสดงผลไม่ถูกต้องครับ แค่ได้สัดส่วนหน้าจอเฉยๆ แต่ไม่แสดงผล Responsive ที่แท้จริง
ผมใช้โครมแล้ว กดปุ่ม CTRL ค้างไว้แล้วเลื่อน Scroll ไปที่ขนาด 300% (สำหรับไอโฟน5)
ถึงจะแสดงผลได้ถูกต้องครับ
วิธีไหนก็ได้สัดส่วนไม่เท่าของจริงอยู่แล้วครับ เพราะความละเอียดจอที่ตั้งกับสัดส่วนจอจริงไม่เท่ากันครับ แล้วการประมวลผลของ CPU ไปจนถึง webkit ที่ Google กับ Apple นำไปใช้ก็แตกต่างกัน ดังนั้นทุกวิธีดูภาพรวมเฉยๆครับ
อ้างถึงจาก: adidog ใน 18 กรกฎาคม 2014, 16:12:57
ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ
ความรู้ใหม่ขอบคุณครับ
ผมล่อจากเว็บบริการอย่างเดียวเลย
http://mobiletest.me/
:-X
ใช้อะไรทดสอบ ก็ไม่เหมือนใช้สมาร์ทโฟนของเราดูเอง
โอ้ววว พึ่งรู้เหมือนกันแฮะ ขอบคุณครับ :wanwan011:
ของ firefox มีที่ล้ำกว่านี้อีกครับ
กดปุ่ม ctrl + shift + M
มันจะเข้าตัวปรับขนาดหน้าต่างได้เลย
(http://upload.armuay.com/img/2014-07-17/11-40-19_0.701016.png) (http://upload.armuay.com/2014-07-17_11-40-19_0.701016.png)
เยี่ยมไปเลยทั้งจกขกทและคนตอบ
ขอบคุณครับ
อ้างถึงจาก: naraj ใน 18 กรกฎาคม 2014, 20:20:44
ผมล่อจากเว็บบริการอย่างเดียวเลย
http://mobiletest.me/
:-X
อันนี้แนะนำเลยครับ เข้าไปลองมาแล้ว แสดงผลถูกต้องเป๊ะเหมือนใช้โทรศัพท์จริงผมลองเข้าเว้บผมดูแระ แสดงผลสวยงามครับ http://sisaket-news.com/
ขอบคุณท่านนี้มากๆที่ชี้ทางสว่าง
ผมใช้ตัวนี้ครับ ดูได้เกือบครบเลย
http://www.responsinator.com/
:wanwan017:
ความรู้ใหม่ ขอบคุณครับ
อ้างถึงจาก: toekingsize ใน 18 กรกฎาคม 2014, 23:24:50
อ้างถึงจาก: naraj ใน 18 กรกฎาคม 2014, 20:20:44
ผมล่อจากเว็บบริการอย่างเดียวเลย
http://mobiletest.me/
:-X
อันนี้แนะนำเลยครับ เข้าไปลองมาแล้ว แสดงผลถูกต้องเป๊ะเหมือนใช้โทรศัพท์จริง
ผมลองเข้าเว้บผมดูแระ แสดงผลสวยงามครับ http://sisaket-news.com/
ขอบคุณท่านนี้มากๆที่ชี้ทางสว่าง
เว็บนี้แค่ใช้ไอเฟรม . . . :-X
(http://a.lnwpic.com/ufk0b1.png)
บางเว็บใช้วิธีตรวจจับ User agent เพื่อแสดงส่วนประกอบออกมา แชทด้านล่าง(ในหน้าเว็บผมที่ทดสอบ)หากมีการเปลี่ยน User agent ให้เป็นของ Device จริงๆ รูปแบบจะเปลี่ยนไป (จะแสดงผลเหมือนใน Google Chrome ที่เลือกให้เปลี่ยน User agent ด้วย)
อ้างถึงจาก: akkradet ใน 19 กรกฎาคม 2014, 01:00:13
ผมใช้ตัวนี้ครับ ดูได้เกือบครบเลย
http://www.responsinator.com/
ผมก็ใช้ตัวนี้อยู่ครับ แจ่มมากๆ
อ้างถึงจาก: Twenty-One ใน 19 กรกฎาคม 2014, 09:06:04
อ้างถึงจาก: akkradet ใน 19 กรกฎาคม 2014, 01:00:13
ผมใช้ตัวนี้ครับ ดูได้เกือบครบเลย
http://www.responsinator.com/
ผมก็ใช้ตัวนี้อยู่ครับ แจ่มมากๆ
อันนี้ก็ดีครับ
ตามหลักแล้วก็ใช้เพิ่อดูคร่าวๆ น่ะครับถ้าเราเขียน css ดักตรงตามขนาดหน้าจอมันก็ไม่มีทางเพื้ยนไปกว่าหลอกครับ ไม่งั้นเค้าไม่ทำเว็บพวกนี้หรือทูลสำเร็จรูปหรือย่อขยายหน้าจอได้
ที่มันแสดงผลผิดคือ บางที browser บางตัวมันไม่รองรับ technology บางอย่าง ดูได้ว่า browser ตัวไหนรองรับอะไรบ้าง
http://css3test.com/ซึ่งถ้าเราบังเอิญไปใช้ ขอสมมุตินะครับ Grid Layout แล้วรันบน Firefox ปรับขนาดอย่างดีลองย่อลองเทสตามเว็บตามทูลแสดงผลตรงหมด
แต่มาเปิดกับโทรศัพท์จริง ซึ่งใช้ Chrome ซึ่งไม่รองรับ Grid Layout ก็ทำให้เพี้ยนนั่นเอง :wanwan017:
สำหรับผมไม่ได้ใช้ plugin หรือ extension เสริมเลยครับ เพราะเป็น feature ใหม่ที่อยู่ใน Chromium
กดเรียก developer tools ขึ้นมาเหมือน Chrome แต่มีปุ่ม responsive devices ให้เลือก จำลองได้ว่าใช้กับอุปกรณ์อะไร เช่น iphone4, 5, ipad 2-3-4 หรือ android ตัวอิ่นๆ
อีกทั้งยังปรับจำลองความเร็วในการโหลดหน้าเว็บได้ด้วยว่าจะเป็น edge 3g หรือ wifi ความเร็วสูง
(http://upic.me/i/l2/10428276_679683598734333_2312738825971140446_o.png) (http://upic.me/show/51985551)
ผมว่าจริงๆ แล้ว chromium เป็น browser ที่เจ๋ง แล้วก็อัพเดทบ่อยดีด้วยนะครับ นักพัฒนาคนไหนสนใจก็ลองโหลดมาใช้ดูได้ครับ