ID: W202603061014
Tags: web development, scripting, javascript

⇐ Today’s Note ⇒

browser screen size difference

Er zijn meerdere dingen die je default screen van een website kunnen beinvloeden:

Met deze onderstaande code kan je je scherm size ophalen. Zorg dat je je terminal als pop-out open hebt, en niet als sidebar. Want dit verkleint je scherm:

console.log(`X${window.innerWidth}, Y${window.innerHeight}`);

Hieronder heb je een checklist om af te gaan om te kijken wat er aan de hand is.

Checklist

• Is de browser ingezoomed. Check of de browser 100% is met ctrl + scroll.
• Is het een browser met een top navigatie bar, of een sidebar. En kan je dit hiden?
• Is je display screen size wel 1080p
• Is je display screen gescaled? display settings -> scale -> 100%
• Is je browser fullscreen?
• Staat je navbar (windows taskbar) onder, links, rechts, of boven. En is het ingesteld op klein of grote icons.
• Heb je browser extensions geinstalleerd die iets aanpassen?
• Font scaling, dit is een instelling in je OS die effect kan hebben op je browser looks.

Met deze onderstaande code kan je nog meer informatie ophalen om te vergelijken.

function detectSystemInfo() {
  const htmlElement = document.documentElement;
  const bodyElement = document.body;
  const remInPixels = parseFloat(
    window.getComputedStyle(htmlElement).fontSize
  );
 
  const info = {
    viewport: {
      width: window.innerWidth,
      height: window.innerHeight
    },
    screen: {
      width: window.screen.width,
      height: window.screen.height,
      availWidth: window.screen.availWidth,
      availHeight: window.screen.availHeight,
      colorDepth: window.screen.colorDepth,
      pixelDepth: window.screen.pixelDepth
    },
    scaling: {
      devicePixelRatio: window.devicePixelRatio,
      chromeZoom: (window.devicePixelRatio * 100).toFixed(0) + '%',
      remInPixels: remInPixels
    },
    document: {
      documentWidth: htmlElement.scrollWidth,
      documentHeight: htmlElement.scrollHeight,
      bodyWidth: bodyElement.scrollWidth,
      bodyHeight: bodyElement.scrollHeight
    },
    userAgent: navigator.userAgent,
    platformInfo: {
      platform: navigator.platform,
      language: navigator.language,
      hardwareConcurrency: navigator.hardwareConcurrency,
      maxTouchPoints: navigator.maxTouchPoints
    }
  };
  console.log(JSON.stringify(info, null, 2));
  console.log(`X${info.viewport.width}, Y${info.viewport.height}`);
  return info;
}
 
detectSystemInfo();

---

References