ใช้ Property screen.colorDepth เพื่อดึงจำนวนบิตที่ใช้แสดงสีหนึ่งสีบนหน้าจอ (Bits per Color Component)
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Screen width: " + screen.width);
document.write("<br>Screen height: " + screen.height);
document.write("<br>Color Depth: " + screen.colorDepth);
</script>
</body>
</html>
คำอธิบาย
screen.colorDepth— คืนค่าจำนวนบิตต่อ Color Component (Red/Green/Blue)- ผลลัพธ์ทั่วไป:
24(8-bit ต่อช่องสี × 3 = 24-bit True Color) - หน้าจอ High-end อาจคืน
30(10-bit ต่อช่องสี) หรือ48(16-bit ต่อช่องสี)
ความแตกต่าง pixelDepth vs colorDepth
| Property | ความหมาย | ค่าปกติ |
|---|---|---|
screen.colorDepth | Bit ต่อ Color Component (RGB) | 24 |
screen.pixelDepth | Bit ต่อ Pixel ทั้งหมด (รวม Alpha) | 24 หรือ 32 |
ใน Browser สมัยใหม่ทั้งคู่มักคืนค่าเท่ากัน (24) เพราะไม่มี Alpha Channel ใน Display Pipeline
การใช้งาน
- ปรับคุณภาพรูปภาพ/วิดีโอตามความสามารถหน้าจอ
- ตัดสินใจโหลด High-DPI Assets (Retina/4K)
- Analytics: เก็บข้อมูล Hardware ของ Visitor
