SCREEN INFO

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const COMMON = [
    { name: '360p', w: 480, h: 360 },
    { name: '720p HD', w: 1280, h: 720 },
    { name: '1080p FHD', w: 1920, h: 1080 },
    { name: '1440p QHD', w: 2560, h: 1440 },
    { name: '4K UHD', w: 3840, h: 2160 },
    { name: '8K', w: 7680, h: 4320 },
    { name: 'iPhone SE', w: 375, h: 667 },
    { name: 'iPhone 14', w: 390, h: 844 },
    { name: 'iPad', w: 768, h: 1024 },
    { name: 'MacBook 13"', w: 1280, h: 800 },
    { name: 'MacBook 16"', w: 1728, h: 1117 },
    { name: 'iMac 27"', w: 2560, h: 1440 },
  ];

  function update() {
    const sw = screen.width, sh = screen.height;
    const vw = window.innerWidth, vh = window.innerHeight;
    const dpr = window.devicePixelRatio || 1;
    const pw = Math.round(sw * dpr), ph = Math.round(sh * dpr);
    const cd = screen.colorDepth || screen.pixelDepth;
    const orient = screen.orientation ? screen.orientation.type : (window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
    const touch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

    document.getElementById('cScreenRes').textContent = `${sw}×${sh}`;
    document.getElementById('cViewport').textContent = `${vw}×${vh}`;
    document.getElementById('cDPR').textContent = dpr.toFixed(2);
    document.getElementById('cColorDepth').textContent = cd;
    document.getElementById('cPhysRes').textContent = `${pw}×${ph}`;
    document.getElementById('cOrientation').textContent = orient.split('-')[0];

    const rows = [
      ['Screen Width', sw + 'px'],
      ['Screen Height', sh + 'px'],
      ['Available Width', screen.availWidth + 'px'],
      ['Available Height', screen.availHeight + 'px'],
      ['Viewport Width', vw + 'px'],
      ['Viewport Height', vh + 'px'],
      ['Device Pixel Ratio', dpr.toFixed(2)],
      ['Physical Width', pw + 'px'],
      ['Physical Height', ph + 'px'],
      ['Color Depth', cd + ' bit'],
      ['Pixel Depth', (screen.pixelDepth || cd) + ' bit'],
      ['Orientation', orient],
      ['Touch Support', touch ? 'Yes (' + navigator.maxTouchPoints + ' points)' : 'No'],
      ['Platform', navigator.platform || 'unknown'],
      ['User Agent', navigator.userAgent],
    ];

    document.getElementById('detailTable').innerHTML = rows.map(([k,v]) =>
      `<tr><td>${k}</td><td>${v}</td></tr>`
    ).join('');

    const sw2 = screen.width;
    document.getElementById('compGrid').innerHTML = COMMON.map(c => {
      const isCurrent = sw === c.w && sh === c.h;
      return `<div class="comp-card ${isCurrent ? 'current' : ''}">
        <div class="comp-res">${c.w}×${c.h}</div>
        <div class="comp-name">${c.name}</div>
        ${isCurrent ? '<div class="comp-badge">← your screen</div>' : ''}
      </div>`;
    }).join('');
  }

  function copyAll() {
    const sw = screen.width, sh = screen.height;
    const vw = window.innerWidth, vh = window.innerHeight;
    const dpr = window.devicePixelRatio || 1;
    const text = `Screen: ${sw}×${sh}\nViewport: ${vw}×${vh}\nDPR: ${dpr}\nColor Depth: ${screen.colorDepth}bit\nPlatform: ${navigator.platform}\nUA: ${navigator.userAgent}`;
    navigator.clipboard.writeText(text).catch(() => {});
    const btn = document.getElementById('copyAllBtn');
    btn.textContent = 'Copied!'; btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'Copy All Info'; btn.classList.remove('copied'); }, 2000);
  }

  window.addEventListener('resize', update);
  update();