การดึงขนาดหน้าจอที่ใช้งานได้
ใช้ window.screen.availWidth และ window.screen.availHeight เพื่อได้ความกว้างและความสูงของพื้นที่ทำงาน (ไม่นับแถบงาน/แถบเมนู)
ตัวอย่างโค้ดเต็ม
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Resolution</title>
</head>
<body>
<script>
console.log("Available Width = " + window.screen.availWidth);
console.log("Available Height = " + window.screen.availHeight);
// คุณสมบัติอื่นๆ ที่น่าสนใจ
console.log("Full Width = " + window.screen.width);
console.log("Full Height = " + window.screen.height);
console.log("Color Depth = " + window.screen.colorDepth);
console.log("Pixel Depth = " + window.screen.pixelDepth);
</script>
</body>
</html>
วิธีรัน
บันทึกเป็น index.html แล้วเปิดด้วย Live Server
ผลลัพธ์ตัวอย่าง
Available Width = 1920
Available Height = 1040
Full Width = 1920
Full Height = 1080
Color Depth = 24
Pixel Depth = 24
คำอธิบาย
availWidth/availHeight: พื้นที่ที่ใช้งานได้ (หักแถบงานออก)width/height: ความละเอียดเต็มของหน้าจอ- เหมาะสำหรับ responsive design หรือปรับ layout ตามขนาดหน้าจอ
