জাভাস্ক্রিপ্ট BOM Window Screen: স্ক্রিন তথ্য পাওয়ার গাইড

Window Screen API: ব্যবহারকারীর স্ক্রিন সম্পর্কে তথ্য

window.screen (বা শুধু screen) অবজেক্ট ব্যবহারকারীর ডিভাইসের স্ক্রিন সম্পর্কে তথ্য প্রদান করে: রেজোলিউশন, কালার ডেপথ, পিক্সেল ডেন্সিটি ইত্যাদি। এটি রেসপন্সিভ ডিজাইন, অ্যানালিটিক্স, ক্যানভাস রেন্ডারিং, গেমিং ইত্যাদিতে কাজে লাগে।

Screen অবজেক্টের প্রপার্টি

পূর্ণ উদাহরণ: স্ক্রিন ইনফো দেখানো

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen Info</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
    .info-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-top: 20px; }
    .label { font-weight: 600; color: #4f46e5; }
    .value { font-family: monospace; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; }
    button { padding: 12px 24px; background: #4f46e5; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; }
    button:hover { background: #4338ca; }
  </style>
</head>
<body>
  <h1>🖥️ স্ক্রিন তথ্য</h1>
  <button id="showBtn">স্ক্রিন ইনফো দেখান</button>
  <div class="info-grid" id="infoGrid"></div>
  
  <script>
    const grid = document.getElementById('infoGrid');
    const btn = document.getElementById('showBtn');
    
    btn.addEventListener('click', () => {
      const s = window.screen;
      const props = [
        ['width', 'স্ক্রিন প্রস্থ'],
        ['height', 'স্ক্রিন উচ্চতা'],
        ['availWidth', 'উপলব্ধ প্রস্থ'],
        ['availHeight', 'উপলব্ধ উচ্চতা'],
        ['colorDepth', 'কালার ডেপথ (বিট)'],
        ['pixelDepth', 'পিক্সেল ডেপথ'],
        ['orientation?.type', 'অরিয়েন্টেশন টাইপ'],
        ['orientation?.angle', 'অরিয়েন্টেশন কোণ'],
        ['deviceXDPI', 'ডিভাইস X DPI'],
        ['logicalXDPI', 'লজিক্যাল X DPI'],
      ];
      
      grid.innerHTML = '';
      props.forEach(([key, label]) => {
        // নেস্টেড প্রপার্টি হ্যান্ডলিং (orientation.type)
        let value = key.includes('?') 
          ? key.split('?').reduce((obj, k) => obj?.[k], s)
          : s[key];
        
        const labelEl = document.createElement('div');
        labelEl.className = 'label';
        labelEl.textContent = label + ':';
        
        const valueEl = document.createElement('div');
        valueEl.className = 'value';
        valueEl.textContent = value ?? 'N/A';
        
        grid.append(labelEl, valueEl);
      });
    });
  </script>
</body>
</html>

ব্যবহারিক অ্যাপ্লিকেশন

১. রেসপন্সিভ ক্যানভাস/গেম রেন্ডারিং

const canvas = document.getElementById('gameCanvas');
const dpr = window.devicePixelRatio || 1;
canvas.width = screen.availWidth * dpr;
canvas.height = screen.availHeight * dpr;
canvas.style.width = screen.availWidth + 'px';
canvas.style.height = screen.availHeight + 'px';
ctx.scale(dpr, dpr);

২. মোবাইল অরিয়েন্টেশন ডিটেক্ট

// অরিয়েন্টেশন চেঞ্জ লিসেন
screen.orientation?.addEventListener('change', () => {
  console.log('অরিয়েন্টেশন:', screen.orientation.type); // 'portrait-primary', 'landscape-primary'
});

// লক করুন (ফুলস্ক্রিন গেমের জন্য)
async function lockLandscape() {
  try {
    await screen.orientation.lock('landscape');
  } catch (e) {
    console.log('লক ব্যর্থ:', e.message);
  }
}

৩. হাই-ডিপি (Retina) ডিটেকশন

const isRetina = window.devicePixelRatio > 1;
// বা
const isHighDPI = screen.logicalXDPI > 96 || screen.deviceXDPI > 96;

৪. অ্যানালিটিক্স/লগিং

const screenInfo = {
  resolution: `${screen.width}x${screen.height}`,
  available: `${screen.availWidth}x${screen.availHeight}`,
  colorDepth: screen.colorDepth,
  dpr: window.devicePixelRatio,
  orientation: screen.orientation?.type
};
// এনালিটিক্সে পাঠান

সীমাবদ্ধতা এবং ভুল ধারণা

• CSS পিক্সেল !== ডিভাইস পিক্সেল: `screen.width` ডিভাইস পিক্সেল রিটার্ন করে। CSS-এ `window.innerWidth` ব্যবহার করুন (ডিভাইস-ইন্ডিপেন্ডেন্ট পিক্সেল)।
• মোবাইলে ভিউপোর্ট ≠ স্ক্রিন: মোবাইল ব্রাউজার অ্যাড্রেস বার, টুলবার, ন্যাভবার কভার করে — `availHeight`/`availWidth` এরও নিচে থাকতে পারে।
• মাল্টি-মনিটর: `screen` শুধু প্রাইমারি স্ক্রিনের ইনফো দেয়। window.screenLeft, screenTop উইন্ডো পজিশন দেয়।
• পিক্সেলডেপথ ডিপ্রিকেটেড: pixelDepth ব্যবহার করবেন না, colorDepth ব্যবহার করুন।

সংক্রান্ত API

• window.devicePixelRatio — CSS পিক্সেল vs ডিভাইস পিক্সেল অনুপাত (Retina: 2, 3+)।
• window.innerWidth/innerHeight — ভিউপোর্ট সাইজ (স্ক্রোলবার সহ)۔
• document.documentElement.clientWidth/clientHeight — ভিউপোর্ট সাইজ (স্ক্রোলবার বাদে)۔
• matchMedia('(min-resolution: 2dppx)') — মিডিয়া কোয়েরি দিয়ে হাই-ডিপি ডিটেক্ট।