วิธีใช้งาน
- เปิดหน้าเว็บ ค่าจะถูกอ่านจากเบราว์เซอร์ของคุณทันที
- ปรับขนาดหน้าต่างหรือหมุนอุปกรณ์เพื่อดูขนาดวิวพอร์ตและการวางแนวที่อัปเดต
- ใช้ “คัดลอกทั้งหมด” เพื่อวางรายละเอียดลงในรายงานข้อผิดพลาดหรือคำขอรับการสนับสนุน
วิธีการทำงาน
เบราว์เซอร์รายงานขนาดเป็นพิกเซล CSS ซึ่งเป็นหน่วยที่หน้าเว็บใช้ในการจัดวาง บนจอความหนาแน่นสูง พิกเซล CSS หนึ่งหน่วยใช้พิกเซลจริงหลายจุดในการแสดงผล โดยอัตราส่วนพิกเซลอุปกรณ์ (DPR) จะบอกว่ามีกี่เท่า โทรศัพท์ที่รายงาน 390 × 844 และมี DPR เท่ากับ 3 จะมีแผงจอประมาณ 1170 × 2532 พิกเซลอุปกรณ์ บนเดสก์ท็อป การซูมเบราว์เซอร์และการปรับขนาดจอของระบบปฏิบัติการต่างก็เปลี่ยนทั้ง DPR และขนาด CSS ดังนั้นจอ 2560 × 1440 ที่ปรับขนาด 125 % จะรายงานเป็น 2048 × 1152
ความละเอียดหน้าจอคือทั้งจอ พื้นที่ที่ใช้ได้ไม่รวมแถบถาวรของระบบปฏิบัติการ เช่น ทาสก์บาร์ของ Windows หรือแถบเมนูของ macOS ส่วนวิวพอร์ตคือพื้นที่หน้าต่างเบราว์เซอร์ที่แสดงหน้าเว็บ โดยไม่รวมแถบเครื่องมือแต่รวมแถบเลื่อน วิวพอร์ตคือสิ่งที่ CSS media query เช่น min-width: 768px ตอบสนอง จึงเป็นค่าที่ต้องตรวจสอบเมื่อทดสอบเลย์เอาต์แบบตอบสนอง
ค่าโครงสีและการลดภาพเคลื่อนไหวมาจากฟีเจอร์ CSS media เดียวกับที่เว็บไซต์ใช้ปรับตามการตั้งค่าระบบของคุณ ค่าแบรนด์ แพลตฟอร์ม และมือถือมาจาก User-Agent Client Hints ซึ่งมีเฉพาะเบราว์เซอร์ที่ใช้ Chromium เท่านั้น เบราว์เซอร์บางตัวจงใจปัดหรือกำหนดค่าเหล่านี้ตายตัวเพื่อลดการระบุตัวตนจากลายนิ้วมือ ค่าจึงอาจไม่ตรงกับฮาร์ดแวร์ของคุณโดยแท้จริง
ตัวอย่าง
ทดสอบเลย์เอาต์แบบตอบสนอง
เลย์เอาต์พังบนแล็ปท็อปของเพื่อนร่วมงาน พวกเขาคัดลอกรายละเอียดมาให้ ซึ่งแสดงวิวพอร์ต 1280 × 649 ที่ DPR 1.5 ให้ตั้งแถบเครื่องมือจำลองอุปกรณ์ของเบราว์เซอร์เป็นวิวพอร์ตเดียวกันเพื่อจำลองปัญหา
เลือกขนาดภาพ
รูปภาพสินค้าแสดงกว้าง 400 พิกเซล CSS บนโทรศัพท์ DPR 3 จึงต้องใช้ 1200 พิกเซลจึงจะคมชัด ซึ่งช่วยบอกว่าควรใส่ขนาดใดใน srcset
ตรวจสอบการปรับขนาดจอภาพ
จอ 3840 × 2160 รายงานเป็น 2560 × 1440 พร้อม DPR 1.5 หมายความว่า Windows กำลังปรับขนาดจอที่ 150 %
คำถามที่พบบ่อย
ทำไมความละเอียดหน้าจอจึงไม่ตรงกับสเปกมอนิเตอร์ของฉัน
เบราว์เซอร์รายงานเป็นพิกเซล CSS ซึ่งคือพิกเซลจริงหารด้วยค่าปรับสเกล คูณด้วยอัตราส่วนพิกเซลอุปกรณ์จะได้ค่าใกล้เคียงความละเอียดฮาร์ดแวร์ การซูมเบราว์เซอร์ก็เปลี่ยนค่าที่รายงานเช่นกัน
ขนาดหน้าจอกับขนาดวิวพอร์ตต่างกันอย่างไร
ขนาดหน้าจอคือพื้นที่แสดงผลทั้งหมด ส่วนวิวพอร์ตเป็นพื้นที่ภายในหน้าต่างเบราว์เซอร์ที่ใช้แสดงหน้าเว็บเท่านั้น จึงเล็กกว่าและเปลี่ยนเมื่อคุณปรับขนาดหน้าต่างหรือเปิดเครื่องมือนักพัฒนา
ข้อมูลนี้ถูกใช้เพื่อติดตามฉันหรือไม่
หน้านี้ไม่ได้ใช้ติดตาม: ค่าต่าง ๆ แสดงให้คุณเห็นเท่านั้น ไม่มีการบันทึกหรือส่งไปที่ใด เว็บไซต์อื่นสามารถอ่านค่าเดียวกันได้ ซึ่งเป็นเหตุผลที่บางเบราว์เซอร์ปัดค่าเพื่อให้การระบุตัวตนด้วยลายนิ้วมืออุปกรณ์ทำได้ยากขึ้น
ทำไมแล็ปท็อปของฉันจึงแสดงว่ารองรับระบบสัมผัส
การรองรับระบบสัมผัสอิงจากจำนวนจุดสัมผัสที่เบราว์เซอร์รายงาน แล็ปท็อปจอสัมผัสจะรายงานแม้คุณใช้เมาส์เป็นหลัก และไดรเวอร์หรือการตั้งค่ารีโมตเดสก์ท็อปบางแบบอาจรายงานว่ารองรับระบบสัมผัสทั้งที่ไม่มีจอสัมผัส
ความเป็นส่วนตัว
ค่าทั้งหมดถูกอ่านด้วย JavaScript ในเบราว์เซอร์ของคุณและแสดงให้คุณเห็นเท่านั้น ไม่มีการบันทึก อัปโหลด หรือรวมอยู่ใน analytics มีเพียงเหตุการณ์แบบไม่ระบุตัวตนว่าเปิดและใช้เครื่องมือนี้เท่านั้นที่ถูกบันทึก