JavaScript BOM Window Screen Object - คุณสมบัติหน้าจอ

Window Screen Object คืออะไร?

window.screen (หรือแค่ screen) เป็นออบเจ็กต์ของ Browser Object Model (BOM) ที่ให้ข้อมูลเกี่ยวกับหน้าจอของผู้ใช้ (Client's Screen) เช่น ความกว้าง ความสูง ความลึกสี เป็นต้น

คุณสมบัติหลัก (Properties)

ตัวอย่างโค้ดแสดงข้อมูลหน้าจอ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Screen Object Info</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 700px; margin: 0 auto; }
    .result { font-size: 16px; line-height: 1.8; background: #f5f5f5; padding: 20px; border-radius: 8px; font-family: monospace; white-space: pre-wrap; }
    button { padding: 12px 24px; background: #2196F3; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
    button:hover { background: #1976D2; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
    th { background: #2196F3; color: white; }
    tr:nth-child(even) { background: #f9f9f9; }
  </style>
</head>
<body>
  <h1>ข้อมูลหน้าจอ (Screen Object)</h1>
  <button id="detectBtn">ตรวจสอบข้อมูลหน้าจอ</button>
  <div class="result" id="result">คลิกปุ่มด้านบนเพื่อดูข้อมูล</div>

  <table id="detailTable" style="display:none">
    <thead><tr><th>Property</th><th>Value</th><th>คำอธิบาย</th></tr></thead>
    <tbody></tbody>
  </table>

  <script>
    const btn = document.getElementById('detectBtn');
    const result = document.getElementById('result');
    const tableBody = document.querySelector('#detailTable tbody');
    const table = document.getElementById('detailTable');
    
    btn.addEventListener('click', () => {
      const s = window.screen;
      const props = [
        { key: 'width', label: 'screen.width', desc: 'ความกว้างหน้าจอทั้งหมด' },
        { key: 'height', label: 'screen.height', desc: 'ความสูงหน้าจอทั้งหมด' },
        { key: 'availWidth', label: 'screen.availWidth', desc: 'ความกว้างพื้นที่ใช้งานได้' },
        { key: 'availHeight', label: 'screen.availHeight', desc: 'ความสูงพื้นที่ใช้งานได้' },
        { key: 'colorDepth', label: 'screen.colorDepth', desc: 'ความลึกสี (บิต/พิกเซล)' },
        { key: 'pixelDepth', label: 'screen.pixelDepth', desc: 'ความลึกพิกเซล' },
        { key: 'orientation', label: 'screen.orientation', desc: 'ทิศทางหน้าจอ', isObj: true },
        { key: 'isExtended', label: 'screen.isExtended', desc: 'ใช้หน้าจอขยาย (Multi-monitor)' }
      ];
      
      let output = '';
      tableBody.innerHTML = '';
      
      props.forEach(p => {
        let value = s[p.key];
        let displayValue = '';
        
        if (p.isObj && value) {
          displayValue = JSON.stringify(value);
        } else if (value !== undefined) {
          displayValue = value;
        } else {
          displayValue = 'ไม่รองรับ / N/A';
        }
        
        output += `${p.label} = ${displayValue}\n`;
        tableBody.innerHTML += `${p.label}${displayValue}${p.desc}`;
      });
      
      result.textContent = output;
      table.style.display = 'table';
    });
  </script>
</body>
</html>

การประยุกต์ใช้จริง

1. Responsive Breakpoints

function getDeviceType() {
  const w = screen.width;
  if (w <= 480) return 'mobile';
  if (w <= 768) return 'tablet';
  if (w <= 1024) return 'laptop';
  return 'desktop';
}

2. ปรับ UI ตามหน้าจอ

if (screen.availHeight < 600) {
  // จอสั้น (เช่น landscape mobile) - ลด header height
  document.body.classList.add('short-screen');
}

3. High DPI / Retina Detection

const isRetina = window.devicePixelRatio > 1;
// หรือ
const isHighDPI = screen.colorDepth >= 30;

4. Orientation Change Handler

screen.orientation.addEventListener('change', () => {
  console.log('Orientation:', screen.orientation.type); // "landscape-primary", "portrait-primary", etc.
});

ข้อควรระวัง

• screen.width/height = ขนาดหน้าจอจริง (Hardware pixels)
• window.innerWidth/innerHeight = ขนาด viewport ของเบราว์เซอร์ (CSS pixels)
• window.devicePixelRatio = อัตราส่วน CSS pixels ต่อ Device pixels
• บนมือถือ: screen.width ไม่เปลี่ยนเมื่อหมุนจอ แต่ window.innerWidth จะเปลี่ยน
• คุณสมบัติใหม่ (orientation, isExtended) อาจไม่รองรับในเบราว์เซอร์เก่า

ความแตกต่าง Screen vs Window