ต่อไป »

[MiithRanDir]

ใครที่ทำเว็บที่รองรับ Responsive อยู่คงจะเคยหาเครื่องมือต่างๆมาลองทดสอบเว็บตัวเอง

แต่วันนี้ผมมีวิธีทดสอบง่ายๆ รวดเร็วไม่ต้องใช้เครื่องมือใดๆ แต่อาจจะไม่ละเอียดลึกพอ แต่ก็ดูได้พอทน เอ๊ะยังไง งงๆ

ง่ายๆ เลยแค่กดปุ่ม ย่อ ขนาดบราวเซอร์แล้วก็ลากขนาดบราวเซอร์ดู แค่นี้ก็จะเห็นผลได้ระดับนึงแล้วครับ ใครที่รู้แล้วก็ผ่านไปได้เลยครับ มาบอกไว้เผื่อคนไหนยังไม่รู้ครับ

ยกตัวอย่างเว็บตัวเองเลยละกัน











จะเห็นได้ว่าจะตอบสนอง responsive ดี จะไม่มี scrollbar ด้านล่างครับ

หวังว่าคงมีประโยชน์บ้างไม่มากก็น้อยครับ

[teemuk]

สิ้นค่าน่าสนใจครับ เดี่ยวเข้าไปดู

[adidog]

ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ

[sys2528]

ปกติผมก็ใช้เหมือนท่านครับ ตอนนี้ก็ยังใช้อยู่ครับ แต่ผมจะลองตัวนี้อีกตัวครับ

โค๊ด:

http://responsivetest.net/#u=http://www.ipostproperty.com/shop

[sys2528]

ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ

ได้มาอีกอย่าง ขอบคุณมากครับ เพิ่งรู้ว่ามีนะครับเนี้ย 

[kakato]

ต้องลอง

[kondam]

ขอบคุณครับ 

[Moyzier]

เช็คแล้ว โอเคเลยครับ 

[jaturong]

ผมก็ใช้วิธี้ครับ แต่จะลองกะทุกๆ browser และก็เอามาลองบนทั้ง Smart phone / tablet เพื่อความแน่ใจครับ 

[zero1150kfc]

ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ

โอ้ ความรู้ใหม่   

ส่วนตัวใช้เหมือนเจ้าของกระทู้ครับ 

[Mesut Ozil]

สุดยอด เพิ่งรู้เหมือนกันครับ 

[verysims]

ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ

โอ้ ความรู้ใหม่   

ส่วนตัวใช้เหมือนเจ้าของกระทู้ครับ 

โอ้วความรู้ใหม่ ขอบคุณครับ 

[max30012540]

ขออนุญาตเจ้าของกระทู้นะครับ
ส่วนตัวใช้ Google Chrome กด F12 เลือกแท๊บ Emulation เมนูด้านซ้ายเลือก Device แล้วเลือกอุปกรณ์ที่ต้องการ กดปุ่ม Emulate หากต้องการยกเลิกกด Reset ครับ

[toekingsize]

ขออนุญาตเจ้าของกระทู้นะครับ
ส่วนตัวใช้ Google Chrome กด F12 เลือกแท๊บ Emulation เมนูด้านซ้ายเลือก Device แล้วเลือกอุปกรณ์ที่ต้องการ กดปุ่ม Emulate หากต้องการยกเลิกกด Reset ครับ

วิธีนี้แสดงผลไม่ถูกต้องครับ แค่ได้สัดส่วนหน้าจอเฉยๆ  แต่ไม่แสดงผล Responsive ที่แท้จริง

ผมใช้โครมแล้ว กดปุ่ม CTRL ค้างไว้แล้วเลื่อน Scroll ไปที่ขนาด 300% (สำหรับไอโฟน5)

ถึงจะแสดงผลได้ถูกต้องครับ

[max30012540]

ขออนุญาตเจ้าของกระทู้นะครับ
ส่วนตัวใช้ Google Chrome กด F12 เลือกแท๊บ Emulation เมนูด้านซ้ายเลือก Device แล้วเลือกอุปกรณ์ที่ต้องการ กดปุ่ม Emulate หากต้องการยกเลิกกด Reset ครับ

วิธีนี้แสดงผลไม่ถูกต้องครับ แค่ได้สัดส่วนหน้าจอเฉยๆ  แต่ไม่แสดงผล Responsive ที่แท้จริง

ผมใช้โครมแล้ว กดปุ่ม CTRL ค้างไว้แล้วเลื่อน Scroll ไปที่ขนาด 300% (สำหรับไอโฟน5)

ถึงจะแสดงผลได้ถูกต้องครับ

วิธีไหนก็ได้สัดส่วนไม่เท่าของจริงอยู่แล้วครับ เพราะความละเอียดจอที่ตั้งกับสัดส่วนจอจริงไม่เท่ากันครับ แล้วการประมวลผลของ CPU ไปจนถึง webkit ที่ Google กับ Apple นำไปใช้ก็แตกต่างกัน ดังนั้นทุกวิธีดูภาพรวมเฉยๆครับ

[antimage3114]

ผมใช้ firefox กด ctrl+shift+m เทสได้ทันทีครับ

ความรู้ใหม่ขอบคุณครับ

[naraj]

ผมล่อจากเว็บบริการอย่างเดียวเลย

โค๊ด:

http://mobiletest.me/

 

[gutter]

ใช้อะไรทดสอบ ก็ไม่เหมือนใช้สมาร์ทโฟนของเราดูเอง

[romance69]

โอ้ววว พึ่งรู้เหมือนกันแฮะ ขอบคุณครับ 

[Synchronize]

ของ firefox มีที่ล้ำกว่านี้อีกครับ

กดปุ่ม ctrl + shift + M

มันจะเข้าตัวปรับขนาดหน้าต่างได้เลย

[doctorcar]

เยี่ยมไปเลยทั้งจกขกทและคนตอบ

[saratlim]

ขอบคุณครับ

[toekingsize]

ผมล่อจากเว็บบริการอย่างเดียวเลย

โค๊ด:

http://mobiletest.me/

 

อันนี้แนะนำเลยครับ เข้าไปลองมาแล้ว แสดงผลถูกต้องเป๊ะเหมือนใช้โทรศัพท์จริง

ผมลองเข้าเว้บผมดูแระ แสดงผลสวยงามครับ  http://sisaket-news.com/

ขอบคุณท่านนี้มากๆที่ชี้ทางสว่าง

[akkradet]

ผมใช้ตัวนี้ครับ ดูได้เกือบครบเลย

โค๊ด:

http://www.responsinator.com/

[goodwide]

 
ความรู้ใหม่ ขอบคุณครับ

[max30012540]

ผมล่อจากเว็บบริการอย่างเดียวเลย

โค๊ด:

http://mobiletest.me/

 

อันนี้แนะนำเลยครับ เข้าไปลองมาแล้ว แสดงผลถูกต้องเป๊ะเหมือนใช้โทรศัพท์จริง

ผมลองเข้าเว้บผมดูแระ แสดงผลสวยงามครับ  http://sisaket-news.com/

ขอบคุณท่านนี้มากๆที่ชี้ทางสว่าง

เว็บนี้แค่ใช้ไอเฟรม . . . 

บางเว็บใช้วิธีตรวจจับ User agent เพื่อแสดงส่วนประกอบออกมา แชทด้านล่าง(ในหน้าเว็บผมที่ทดสอบ)หากมีการเปลี่ยน User agent ให้เป็นของ Device จริงๆ รูปแบบจะเปลี่ยนไป (จะแสดงผลเหมือนใน Google Chrome ที่เลือกให้เปลี่ยน User agent ด้วย)

[Twenty-One]

ผมใช้ตัวนี้ครับ ดูได้เกือบครบเลย

โค๊ด:

http://www.responsinator.com/

ผมก็ใช้ตัวนี้อยู่ครับ แจ่มมากๆ

[kanin03]

ผมใช้ตัวนี้ครับ ดูได้เกือบครบเลย

โค๊ด:

http://www.responsinator.com/

ผมก็ใช้ตัวนี้อยู่ครับ แจ่มมากๆ

อันนี้ก็ดีครับ

ตามหลักแล้วก็ใช้เพิ่อดูคร่าวๆ น่ะครับถ้าเราเขียน css ดักตรงตามขนาดหน้าจอมันก็ไม่มีทางเพื้ยนไปกว่าหลอกครับ ไม่งั้นเค้าไม่ทำเว็บพวกนี้หรือทูลสำเร็จรูปหรือย่อขยายหน้าจอได้

ที่มันแสดงผลผิดคือ บางที browser บางตัวมันไม่รองรับ technology บางอย่าง ดูได้ว่า browser ตัวไหนรองรับอะไรบ้าง

โค๊ด:

http://css3test.com/

ซึ่งถ้าเราบังเอิญไปใช้ ขอสมมุตินะครับ Grid Layout แล้วรันบน Firefox ปรับขนาดอย่างดีลองย่อลองเทสตามเว็บตามทูลแสดงผลตรงหมด
แต่มาเปิดกับโทรศัพท์จริง ซึ่งใช้ Chrome ซึ่งไม่รองรับ Grid Layout ก็ทำให้เพี้ยนนั่นเอง 

[Jir4yu]

สำหรับผมไม่ได้ใช้ plugin หรือ extension เสริมเลยครับ เพราะเป็น feature ใหม่ที่อยู่ใน Chromium
กดเรียก developer tools ขึ้นมาเหมือน Chrome แต่มีปุ่ม responsive devices ให้เลือก จำลองได้ว่าใช้กับอุปกรณ์อะไร เช่น iphone4, 5, ipad 2-3-4 หรือ android ตัวอิ่นๆ
อีกทั้งยังปรับจำลองความเร็วในการโหลดหน้าเว็บได้ด้วยว่าจะเป็น edge 3g หรือ wifi ความเร็วสูง



ผมว่าจริงๆ แล้ว chromium เป็น browser ที่เจ๋ง แล้วก็อัพเดทบ่อยดีด้วยนะครับ นักพัฒนาคนไหนสนใจก็ลองโหลดมาใช้ดูได้ครับ