CSS viewport 1280 × 720 pixels at 1× device pixel ratio. The exact size browsers report on the HD.
The HD viewport is 1280 × 720 CSS pixels, with a device pixel ratio of 1 on a 1280 × 720 pixel display.
Test your site at HD (1280 × 720)
When a user visits your site on the HD, the browser reports window.innerWidth = 1280 and window.devicePixelRatio = 1. Your CSS media queries match against the 1280px CSS width, not the 1280 × 720 physical pixel count of the panel.
At 1280px it hits Tailwind xl (1280px) and Bootstrap xl (1200px).
For sharp full-width images, serve a source at least 1280px wide (1280 CSS px × 1 DPR) through srcset and let the browser pick it.
/* HD: 1280×720 CSS px, DPR 1 */
@media (max-width: 1280px) {
/* styles for this width and narrower */
}
@media (min-resolution: 1dppx) {
/* serve high-density assets */
}The HD reports a CSS viewport of 1280×720 pixels. Browser toolbars reduce the visible height slightly, so window.innerHeight is usually smaller than the full screen height.
The HD uses a default device pixel ratio of 1. Each CSS pixel maps to 1×1 physical pixels on its 1280×720 panel.
At 1280px wide it matches Tailwind xl (min-width 1280px) and Bootstrap xl (min-width 1200px).
Open screensize.io, enter your URL and pick HD (1280×720). 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.
See the full list of device viewport sizes →
Or browse common screen sizes by category →
Use screensize.io to preview your website at any of these resolutions instantly — no DevTools needed.
Open screensize.io →