ขนาดหน้าจอและความละเอียดของอุปกรณ์

ความละเอียดเชิงตรรกะ vs เชิงกายภาพ และ DPR

ทุกหน้าจอในปัจจุบันมีความละเอียดสองแบบ ความละเอียดทางกายภาพ (physical resolution) คือจำนวนพิกเซลจริงที่ฝังอยู่ในแผงจอ เช่น 1179 × 2556 บน iPhone 15 ส่วนความละเอียดเชิงตรรกะ (logical หรือ CSS resolution) คือพื้นที่พิกัดที่เล็กกว่าซึ่งใช้จัดวางหน้าเว็บ เช่น 393 × 852 อัตราส่วนพิกเซลอุปกรณ์ (device pixel ratio หรือ DPR) คือตัวเชื่อมระหว่างสองค่านี้ โดยคำนวณจากความละเอียดทางกายภาพหารด้วยความละเอียดเชิงตรรกะ ดังนั้น DPR เท่ากับ 3 หมายความว่าโทรศัพท์วาดพิกเซลจริงเป็นบล็อกขนาด 3 × 3 สำหรับทุก 1 CSS pixel โทรศัพท์และแล็ปท็อปความหนาแน่นสูงแบบ “Retina” ใช้ DPR เท่ากับ 2 หรือ 3 เพื่อแสดงข้อความและภาพที่คมชัด ในขณะที่จอมอนิเตอร์เดสก์ท็อปทั่วไปมี DPR เท่ากับ 1 ซึ่ง 1 CSS pixel เท่ากับ 1 พิกเซลทางกายภาพพอดี

ทำไมนักออกแบบจึงทำงานโดยอ้างอิงขนาด viewport

เมื่อคุณสร้างเลย์เอาต์แบบ responsive media query และ breakpoint ใน CSS จะถูกวัดเป็นหน่วย CSS pixel หรือ viewport เชิงตรรกะ ไม่ใช่พิกเซลทางกายภาพของแผงจอ โทรศัพท์ที่มีความกว้างทางกายภาพ 1080 พิกเซล ยังคงรายงาน viewport เพียง 360–414 CSS pixel เท่านั้น ซึ่งเป็นเหตุผลที่ breakpoint สำหรับมือถือที่ 360px ครอบคลุมโทรศัพท์ Android ส่วนใหญ่ได้ การออกแบบโดยอิงตาม viewport แทนที่จะอิงความละเอียดดิบ ช่วยให้ขนาดของข้อความและจุดสัมผัส (touch target) มีขนาดทางกายภาพที่สม่ำเสมอในอุปกรณ์ที่มีความหนาแน่นพิกเซลต่างกันมาก ทำให้เลย์เอาต์เดียวกันดูเหมาะสมทั้งบนแล็ปท็อปความหนาแน่นต่ำและมือถือเรือธงความหนาแน่นสูง

วิธีอ่านตารางนี้

• Viewport (CSS px) คือขนาดเชิงตรรกะที่หน้าเว็บมองเห็น โดยแสดงตามทิศทางการวางตามธรรมชาติของอุปกรณ์ — แนวตั้งสำหรับโทรศัพท์และแท็บเล็ต แนวนอนสำหรับแล็ปท็อปและมอนิเตอร์
• ความละเอียดทางกายภาพ (Physical resolution) คือจำนวนพิกเซลจริงของแผงจอ ซึ่งเป็นตัวเลขที่ปรากฏในสเปกของอุปกรณ์
• DPR (device pixel ratio) คือค่าที่คูณ viewport ให้กลายเป็นความละเอียดทางกายภาพ หากค่าใดมากกว่า 1 หมายถึงจอแสดงผลความหนาแน่นสูง
• อัตราส่วนภาพ (Aspect ratio) คือรูปทรงของหน้าจอ ตั้งแต่ 19.5:9 ที่สูงเพรียวของโทรศัพท์รุ่นใหม่ ไปจนถึง 16:9 ของมอนิเตอร์ส่วนใหญ่ และ 21:9 กับ 32:9 ของจอ ultrawide
• แถวของแล็ปท็อปและ 4K สะท้อนระดับการปรับสเกลจอแสดงผล (display scaling) ที่ตั้งค่ามาเป็นค่าเริ่มต้นทั่วไป ดังนั้น viewport อาจมีขนาดเล็กกว่าความละเอียดดั้งเดิมของแผงจอ

ขนาดเปลี่ยนแปลงไปในทุกรุ่น

ควรมองตัวเลขเหล่านี้เป็นข้อมูลอ้างอิงเชิงปฏิบัติ ไม่ใช่การรับประกัน เพราะผู้ผลิตปรับเปลี่ยนขนาดหน้าจอแทบทุกรุ่น เพียง iPhone รุ่นเดียวก็มี viewport กว้าง 375, 390, 393, 402, 414, 430 และ 440 CSS pixel ในรุ่นต่างๆ ที่ผ่านมา ส่วนอุปกรณ์ Android ยิ่งมีความหลากหลายมากกว่านั้น การปรับสเกลการแสดงผลของระบบปฏิบัติการก็เปลี่ยนแปลง viewport ที่รายงานได้อีกเช่นกัน เช่น แล็ปท็อป Windows ความละเอียด 1080p ที่ปรับสเกล 150% จะทำงานเหมือนหน้าจอ 1280 × 720 ที่มี DPR เท่ากับ 1.5 ตัวเลขที่น่าเชื่อถือที่สุดเสมอคือค่าที่เบราว์เซอร์ของคุณเองรายงาน ซึ่งเป็นเหตุผลที่อุปกรณ์ที่ตรงกันด้านบนถูกตรวจจับแบบเรียลไทม์จากหน้าจอของคุณ