วัตถุ window.screen มีข้อมูล เกี่ยวกับหน้าจอของผู้ใช้
อ็อบเจ็กต์ window.screen สามารถเขียนได้โดยไม่ต้องใช้คำนำหน้าหน้าต่าง
คุณสมบัติ:
screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
คุณสมบัติ screen.width จะส่งคืนความกว้างของหน้าจอของผู้เยี่ยมชมใน พิกเซล
แสดงความกว้างของหน้าจอเป็นพิกเซล:
document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;ผลลัพธ์จะเป็น:
<script>
document.write("Screen Width: " + screen.width);
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width;
</script>
</body>
</html>
คุณสมบัติ screen.height จะส่งคืนความสูงของหน้าจอของผู้เยี่ยมชมเป็นพิกเซล
แสดงความสูงของหน้าจอเป็นพิกเซล:
document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;ผลลัพธ์จะเป็น:
<script>
document.write("Screen Height: " + screen.height);
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen height is " + screen.height;
</script>
</body>
</html>
คุณสมบัติ screen.availWidth จะส่งคืนความกว้างของหน้าจอของผู้เยี่ยมชม ใน พิกเซล, ลบคุณสมบัติอินเทอร์เฟซเช่นทาสก์บาร์ของ Windows
แสดงความกว้างที่มีอยู่ของหน้าจอเป็นพิกเซล:
document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;ผลลัพธ์จะเป็น:
<script>
document.write("Available Screen Width: " + screen.availWidth);
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen width is " + screen.availWidth;
</script>
</body>
</html>
คุณสมบัติ screen.availHeight จะส่งคืนความสูงของหน้าจอของผู้เยี่ยมชม เป็นพิกเซล ลบคุณลักษณะอินเทอร์เฟซ เช่น แถบงาน Windows
แสดงความสูงที่มีอยู่ของหน้าจอเป็นพิกเซล:
document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;ผลลัพธ์จะเป็น:
<script>
document.write("Available Screen Height: " + screen.availHeight);
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen height is " + screen.availHeight;
</script>
</body>
</html>
คุณสมบัติ screen.colorDepth จะส่งคืนจำนวนบิตที่ใช้ในการแสดงสีเดียว
คอมพิวเตอร์สมัยใหม่ทุกเครื่องใช้ฮาร์ดแวร์ 24 บิตหรือ 32 บิตสำหรับความละเอียดสี:
24 บิต = 16,777,216 "สีจริง" ที่แตกต่างกัน
32 บิต=4,294,967,296 "สีลึก" ที่แตกต่างกัน
คอมพิวเตอร์รุ่นเก่าใช้ 16 บิต: ความละเอียด "สีสูง" ที่แตกต่างกัน 65,536 รายการ
คอมพิวเตอร์เก่ามากและโทรศัพท์มือถือรุ่นเก่าใช้ 8 บิต: "สี VGA" ที่แตกต่างกัน 256 สี
แสดงความลึกของสีของหน้าจอเป็นบิต:
document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;ผลลัพธ์จะเป็น:
<script>
document.write("Screen Color Depth: " + screen.colorDepth);
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen color depth is " + screen.colorDepth;
</script>
</body>
</html>
ค่า #rrggbb (rgb) ที่ใช้ใน HTML แสดงถึง "สีที่แท้จริง" (สีที่แตกต่างกัน 16,777,216 สี)
คุณสมบัติ screen.pixelDepth ส่งคืนความลึกพิกเซลของหน้าจอ
แสดงความลึกพิกเซลของหน้าจอเป็นบิต:
document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;ผลลัพธ์จะเป็น:
<script>
document.write("Screen Pixel Depth: " + screen.pixelDepth);
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen pixel depth is " + screen.pixelDepth;
</script>
</body>
</html>
สำหรับคอมพิวเตอร์สมัยใหม่ ความลึกของสีและความลึกของพิกเซลจะเท่ากัน