Effective Viewport

Monitor 27" QHD

Add to DevTools

Replace built-in DevTools device presets with this measured layout viewport from our open dataset. Open Settings F1 → Devices → Add custom device, then paste the values below.

  • Device name[EV] Monitor 27" QHD · chrome · estimate
  • Width2560
  • Height1284
  • DPR1
  • TypeDesktop
  • User agent stringMozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Use in Figma

Use the measured layout viewport as your Figma frame size, not the marketing screen resolution.

  1. Press F or choose the Frame tool
  2. Set width and height in the Design panel
  3. Rename the frame using the suggested name below
  • Frame name[EV] Monitor 27" QHD · chrome · estimate
  • Width2560
  • Height1284

About this device

Screen
2560×1440 CSS px · DPR 1

About

Why this exists

For years, these numbers were a mystery for developers, designers, and testers. We parroted screen sizes from spec sheets while users were experiencing something completely different in the browser — and nobody had those viewports in one place.

I measure those scenarios on real hardware and simulators and publish them here — viewports you can copy into DevTools, use in Figma, and test automation. The dataset keeps growing and updates when OS or browser UI changes.

Load a URL in the preview, browse the catalog, or share it if the tool helped you.

Privacy policy