ใส่ URL ของคุณ
วางที่อยู่เว็บไซต์แล้วกดดูตัวอย่าง หากไม่ระบุโปรโตคอลจะใช้ HTTPS หรือลองตัวอย่างแบบโต้ตอบที่มีให้ก่อน
เว็บไซต์ของคุณ ในทุกมุมมอง
จำลองหน้าจออุปกรณ์ดูเว็บไซต์แบบ Responsive
ดูตัวอย่างเว็บไซต์บน iPhone, Android และ iPad คลิกใช้งานหน้าเว็บ และแชร์การตั้งค่าเดิม มองรายละเอียดสำคัญผ่านขนาดหน้าจอที่ต่างกัน
เลือกอุปกรณ์ของคุณ27 ขนาดหน้าจอ
ตัวอย่างแบบโต้ตอบ49%
iPad Pro · 1366 × 1024 CSS px
ตัวอย่างใช้งานจริง ลองคลิก เลื่อน และสำรวจ
ตัวอย่างขนาดหน้าจอแบบ Responsive • ไม่ต้องสมัคร • เว็บไซต์ต้องอนุญาตให้ฝังหน้าเว็บ
เลือกมุมมอง
ค้นหาอุปกรณ์ 27 รุ่น หมุนหน้าจอ ปรับขนาดตัวอย่าง และเปิดหรือซ่อนกรอบ ขนาด CSS viewport ยังคงเดิมแม้ย่อภาพให้พอดีจอ
ลองใช้งาน แล้วแชร์
คลิกใช้งานและทดสอบหน้าตาเว็บ แล้วเลือกแชร์ → คัดลอกลิงก์ ผู้รับจะเปิด URL พร้อมคืนค่าอุปกรณ์และการแสดงผลเดิม
สามหน้าจอ พื้นที่จัดวางจริง
ค่าที่กำหนดใช้ CSS pixels ซึ่งเป็นหน่วยของเลย์เอาต์และ media queries ไม่ใช่ความละเอียดพิกเซลจริงของจอ แนวนอนสลับความกว้างกับความสูง ส่วนพอดีหน้าจอเปลี่ยนเฉพาะขนาดภาพตัวอย่าง
เช่น iPad Pro ที่แสดงผล 50% ยังจัดหน้าเว็บที่ความกว้างแนวตั้ง 1024 พิกเซล โดยไม่หักพื้นที่แถบเบราว์เซอร์หรือ safe area ออกจากกรอบที่กำหนด
| อุปกรณ์ | แนวตั้ง | แนวนอน |
|---|---|---|
| iPhone 17 | 402 × 874 | 874 × 402 |
| iPhone 17 Pro | 402 × 874 | 874 × 402 |
| iPhone 17 Pro Max | 440 × 956 | 956 × 440 |
| iPhone Air | 420 × 912 | 912 × 420 |
| iPhone 16 | 393 × 852 | 852 × 393 |
| iPhone 16 Plus | 430 × 932 | 932 × 430 |
| iPhone 16 Pro | 402 × 874 | 874 × 402 |
| iPhone 16 Pro Max | 440 × 956 | 956 × 440 |
| iPhone 16e | 390 × 844 | 844 × 390 |
| iPhone 15 | 393 × 852 | 852 × 393 |
| iPhone 15 Pro Max | 430 × 932 | 932 × 430 |
| iPhone 14 | 390 × 844 | 844 × 390 |
| iPhone 13 | 390 × 844 | 844 × 390 |
| iPhone 13 Pro Max | 428 × 926 | 926 × 428 |
| iPhone SE (2022) | 375 × 667 | 667 × 375 |
| Galaxy S26 Ultra | 412 × 891 | 891 × 412 |
| Galaxy S25 | 360 × 780 | 780 × 360 |
| Galaxy S24 | 360 × 780 | 780 × 360 |
| Galaxy A17 | 412 × 892 | 892 × 412 |
| Pixel 10 | 412 × 924 | 924 × 412 |
| Pixel 8 | 412 × 915 | 915 × 412 |
| iPad Pro 13-inch (M4 / M5) | 1032 × 1376 | 1376 × 1032 |
| iPad Pro 11-inch (M4 / M5) | 834 × 1210 | 1210 × 834 |
| iPad Air 11-inch | 820 × 1180 | 1180 × 820 |
| iPad Pro 12.9″ | 1024 × 1366 | 1366 × 1024 |
| iPad mini 8.3″ | 744 × 1133 | 1133 × 744 |
| Galaxy Tab S7 | 800 × 1280 | 1280 × 800 |
ขนาดที่ระบุคือพื้นที่เลย์เอาต์ CSS ไม่ใช่การจำลองฮาร์ดแวร์ แถบเบราว์เซอร์และการปรับขนาดหน้าจอ Android อาจทำให้ viewport จริงต่างออกไป รายการนี้คัดเลือกเพื่อทดสอบ ไม่ใช่อันดับส่วนแบ่งตลาด
แนวทางตรวจสอบ
ทดสอบให้มากกว่าหน้าแรกที่เห็น
เริ่มจากสิ่งที่ผู้ใช้ควรทำได้ เช่น หาสินค้า อ่านบทความ หรือส่งข้อความ เลือกโทรศัพท์แนวตั้งแล้วลองทำตามขั้นตอน ตรวจหัวข้อยาว เมนูที่กางออก ข้อความบนปุ่ม และส่วนหัวที่ติดหน้าจอ ไม่ใช่ดูแค่ภาพแรก
ดูขนาดระหว่างจุดเปลี่ยนเลย์เอาต์
เปลี่ยนเป็น iPad mini เพื่อตรวจเลย์เอาต์ขนาดกลาง แถบข้างที่พอดีบนแท็บเล็ตใหญ่ อาจบีบเนื้อหาให้แคบเกินไป ตรวจตารางหรือรูปที่กำหนดความกว้างตายตัวซึ่งดันหน้าให้ล้น แล้วลองหมุนจอ เพราะความสูงที่ลดลงอาจทำให้กล่องโต้ตอบหรือส่วนที่ติดหน้าจอใช้งานยาก
ลองฟอร์มและตรวจบนอุปกรณ์จริง
ใช้หน้าทดสอบลองช่องว่าง ข้อความแจ้งเตือน และค่าที่ยาว ตรวจโฟกัสคีย์บอร์ดแยกด้วย เพราะหน้าตาดีไม่ได้แปลว่าเข้าถึงได้เสมอ ก่อนเผยแพร่ ให้ตรวจคีย์บอร์ดบนมือถือ พื้นที่สัมผัส การแสดงผลเฉพาะ Safari และประสิทธิภาพบนอุปกรณ์จริง เครื่องมือนี้ช่วยดูเลย์เอาต์ แต่ไม่แทนการทดสอบเหล่านั้น
คำถามเกี่ยวกับการดูตัวอย่างเว็บไซต์
คลิกและเลื่อนในตัวอย่างได้ไหม?
ได้ หน้าเว็บทำงานจริงใน iframe จึงคลิกลิงก์ ปุ่ม เลื่อนหน้า และกรอกฟอร์มได้เมื่อเว็บไซต์และเบราว์เซอร์อนุญาต การกระทำมีผลกับเว็บไซต์จริง ควรใช้เว็บทดสอบเมื่อลองสั่งซื้อหรือส่งข้อมูลสำคัญ
ทำไมบางเว็บไซต์ไม่แสดงผลหรือปฏิเสธการเชื่อมต่อ?
เว็บไซต์อาจบล็อกการฝังผ่าน X-Frame-Options หรือ Content Security Policy frame-ancestors JustUtils ข้ามข้อจำกัดหรือตรวจจับการบล็อกเว็บภายนอกได้แน่นอนไม่ได้ ลองตัวอย่างที่มีให้ เปิดเว็บโดยตรง หรือขอเจ้าของเว็บอนุญาตต้นทางนี้ หน้า HTTPS ยังไม่สามารถฝัง HTTP ได้ตามปกติ
จำลอง Safari หรือ iPhone จริงหรือไม่?
ไม่ใช่ เครื่องมือเปลี่ยนขนาด CSS viewport และกรอบในเบราว์เซอร์ปัจจุบัน ไม่ได้จำลอง iOS Safari การสัมผัส ความหนาแน่นพิกเซล แถบเบราว์เซอร์ safe area หรือคีย์บอร์ดบนจอ ควรตรวจพฤติกรรมเฉพาะอุปกรณ์กับเครื่องจริง
ลิงก์แชร์เก็บอะไรบ้าง?
เก็บ URL อุปกรณ์ แนวหน้าจอ ขนาดตัวอย่าง สีพื้นหลัง การแสดงกรอบ และโหมดเต็มหน้าต่าง เปิดลิงก์แล้วคืนค่าทันที การเต็มหน้าจอของเบราว์เซอร์ยังต้องคลิก โหมดพอดีหน้าจอปรับตามพื้นที่ของผู้รับโดยคงขนาด viewport การคลิกลิงก์ในเว็บภายนอกอ่านไม่ได้ จึงแชร์ URL ล่าสุดที่โหลดจากเครื่องมือ
มีการอัปโหลดหรือเก็บ URL หรือไม่?
เครื่องมือเก็บการตั้งค่าในหน่วยความจำของหน้า ลิงก์แชร์เก็บค่าในส่วน fragment ของ URL ที่อ่านได้ ไม่ได้บันทึกบนเซิร์ฟเวอร์ ผู้ที่มีลิงก์อ่าน URL ภายในได้ เบราว์เซอร์ติดต่อเว็บที่ฝังโดยตรง เว็บนั้นอาจใช้คุกกี้และรับข้อมูลการเชื่อมต่อ อ่านเรื่องการวิเคราะห์สถิติของ JustUtils ได้ในนโยบายความเป็นส่วนตัว