WXGA Screen Size & Viewport

CSS viewport 1366 × 768 pixels at 1× device pixel ratio. The exact size browsers report on the WXGA.

Updated

The WXGA viewport is 1366 × 768 CSS pixels, with a device pixel ratio of 1 on a 1366 × 768 pixel display.

CSS Viewport1366 × 768 px
Physical Resolution1366 × 768 px
Device Pixel Ratio1×
Aspect Ratio16:9
CategoryCommon Desktop & Laptop

Open your site at the WXGA viewport

Test your site at WXGA (1366 × 768)

Why this viewport matters

When a user visits your site on the WXGA, the browser reports window.innerWidth = 1366 and window.devicePixelRatio = 1. Your CSS media queries match against the 1366px CSS width, not the 1366 × 768 physical pixel count of the panel.

At 1366px it hits Tailwind xl (1280px) and Bootstrap xl (1200px).

For sharp full-width images, serve a source at least 1366px wide (1366 CSS px × 1 DPR) through srcset and let the browser pick it.

/* WXGA: 1366×768 CSS px, DPR 1 */
@media (max-width: 1366px) {
  /* styles for this width and narrower */
}

@media (min-resolution: 1dppx) {
  /* serve high-density assets */
}

WXGA viewport FAQ

What is the viewport size of the WXGA?

The WXGA reports a CSS viewport of 1366×768 pixels. Browser toolbars reduce the visible height slightly, so window.innerHeight is usually smaller than the full screen height.

What is the device pixel ratio (DPR) of the WXGA?

The WXGA uses a default device pixel ratio of 1. Each CSS pixel maps to 1×1 physical pixels on its 1366×768 panel.

Which CSS breakpoint does the WXGA hit?

At 1366px wide it matches Tailwind xl (min-width 1280px) and Bootstrap xl (min-width 1200px).

How can I test my website at the WXGA screen size without the device?

Open screensize.io, enter your URL and pick WXGA (1366×768). It opens your site in a real browser window at exactly that CSS viewport, so media queries, container queries and JavaScript resize logic behave as they would on the device. For touch behaviour and the real browser engine, confirm on hardware before shipping.

Test Screen Sizes Right Now

Use screensize.io to preview your website at any of these resolutions instantly — no DevTools needed.

Open screensize.io →