ตรวจจับความละเอียดหน้าจอและวิวพอร์ต รองรับการทดสอบ Responsive Breakpoint และอัปเดตแบบเรียลไทม์เมื่อปรับขนาด
เครื่องมืออรรถประโยชน์
เกี่ยวกับเครื่องมือนี้
เครื่องมือตรวจจับความละเอียดหน้าจอแสดงความละเอียดหน้าจอ ขนาดวิวพอร์ต อัตราส่วนพิกเซลอุปกรณ์ พื้นที่หน้าจอที่ใช้ได้ ทิศทาง และ Responsive Breakpoint ของคุณทันที ข้อมูลทั้งหมดอัปเดตแบบเรียลไทม์เมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์
คุณสมบัติหลัก
- ตรวจจับความละเอียดหน้าจอและขนาดวิวพอร์ตทันที
- แสดงอัตราส่วนพิกเซลอุปกรณ์และพื้นที่หน้าจอที่ใช้ได้
- แสดงทิศทางปัจจุบัน (แนวนอนหรือแนวตั้ง)
- ตัวบ่งชี้ Responsive Breakpoint (XS, SM, MD, LG, XL, XXL)
- อัปเดตแบบเรียลไทม์เมื่อปรับขนาดหน้าต่างเบราว์เซอร์
- ไม่ต้องติดตั้ง ทำงานในเบราว์เซอร์ทั้งหมด
กรณีการใช้งาน
- ตรวจสอบความละเอียดหน้าจอและขนาดวิวพอร์ตสำหรับการพัฒนาเว็บ
- ตรวจสอบว่าเลย์เอาต์ปัจจุบันตรงกับ Responsive Breakpoint ใด
- ทดสอบการตอบสนองของเว็บไซต์ที่ขนาดหน้าต่างต่าง ๆ
- ระบุอัตราส่วนพิกเซลอุปกรณ์สำหรับการทดสอบจอ High DPI
- ตรวจสอบทิศทางหน้าจออย่างรวดเร็วระหว่างการออกแบบ Responsive
screen
resolution
viewport
คำถามที่พบบ่อย
เครื่องมือตรวจจับความละเอียดหน้าจอแสดงข้อมูลอะไรบ้าง?
เครื่องมือนี้แสดงความละเอียดหน้าจอ ขนาดวิวพอร์ต อัตราส่วนพิกเซลอุปกรณ์ พื้นที่หน้าจอที่ใช้ได้ ทิศทางปัจจุบัน (แนวนอนหรือแนวตั้ง) และ Responsive Breakpoint ที่วิวพอร์ตอยู่ในขณะนั้น
ความละเอียดหน้าจอและขนาดวิวพอร์ตแตกต่างกันอย่างไร?
ความละเอียดหน้าจอคือขนาดพิกเซลทางกายภาพของจอแสดงผล (เช่น 1920x1080) ส่วนขนาดวิวพอร์ตคือพื้นที่หน้าต่างเบราว์เซอร์ที่มองเห็นได้ ซึ่งมักจะเล็กกว่าจอเต็มเนื่องจากอินเทอร์เฟซเบราว์เซอร์ ทาสก์บาร์ และการตั้งค่าการซูม
อัตราส่วนพิกเซลอุปกรณ์คืออะไร?
อัตราส่วนพิกเซลอุปกรณ์ (DPR) คืออัตราส่วนระหว่างพิกเซลทางกายภาพของหน้าจอกับ CSS pixel DPR เท่ากับ 2 หมายถึงแต่ละ CSS pixel ใช้ 2x2 พิกเซลทางกายภาพ ซึ่งพบได้ทั่วไปในจอ Retina และจอ High DPI สิ่งนี้ส่งผลต่อการเรนเดอร์ภาพและการออกแบบ Responsive
จะทดสอบ Responsive Breakpoint ได้อย่างไร?
เครื่องมือแสดงความกว้างและความสูงของวิวพอร์ตปัจจุบันแบบเรียลไทม์ เพียงปรับขนาดหน้าต่างเบราว์เซอร์ก็จะเห็นการเปลี่ยนแปลงของขนาด ซึ่งช่วยระบุว่า CSS Breakpoint ใดทำงานอยู่ที่ขนาดหน้าต่างต่าง ๆ
สามารถตรวจจับทิศทางหน้าจอได้หรือไม่?
ได้ เครื่องมือแสดงว่าหน้าจออยู่ในแนวตั้งหรือแนวนอน มีประโยชน์อย่างยิ่งเมื่อทดสอบ Responsive Layout บนอุปกรณ์มือถือหรือจอหมุนได้