What Is Screen Resolution?

A screen displays an image using a grid of pixels, arranged in rows and columns. Screen resolution is that grid's size, written as width by height: 1920 x 1080 means 1920 pixels across and 1080 pixels down. A 4K monitor runs at 3840 x 2160, four times the pixels of 1080p packed into roughly the same physical space.

Resolution used to matter a lot more to web design than it does now. Back when you could reasonably guess your visitor's screen size, it made sense to design a fixed-width layout and hope it fit. That approach is dead, and for good reason: resolutions today range from a phone a few hundred pixels wide to an ultrawide monitor several times that, often on the same site, in the same hour.

Device-width isn't the same as resolution

Here's the bit that trips people up. A phone's advertised screen resolution isn't the number your layout actually responds to. Modern phone screens pack several physical pixels into each CSS pixel to keep text sharp, so the browser reports a much smaller "device-independent" width than the resolution on the spec sheet. When you're building a responsive layout, you're designing against that CSS pixel width, not the raw resolution the manufacturer advertises.

Fluid layouts and breakpoints

That's why modern layouts don't chase a single magic width. Instead they're fluid: containers sized in percentages or relative units that stretch and shrink with the viewport, combined with breakpoints, points where the layout deliberately changes shape, dropping from a three-column grid to two, or from a horizontal menu to a hamburger, once the available width gets too narrow to hold the wider version comfortably. You don't need a breakpoint for every device on the market. A handful, roughly matching phone, tablet and desktop widths, covers almost everything, because the content itself dictates where a layout starts to look cramped far more precisely than any device spec sheet does.

Test on real phones

None of this replaces actually testing on real devices. Browser dev tools simulate a phone's width well enough for a first pass, but they don't reproduce touch target sizing, how a sticky header behaves under momentum scrolling, or how a form looks once the on-screen keyboard eats half the viewport. If you're shipping a layout, load it on an actual phone, not just a resized desktop browser window, before you call it done.

Whatever you're building, design for the width your visitors are actually using, not the one on your own monitor. If you've got analytics on the site already, check the device breakdown there; it'll tell you more about your real audience's screens than any assumption about a "standard" resolution ever will.