Screen Resolution
Resolution, viewport size and pixel ratio
Resolution versus viewport — what is the difference?
Screen Resolution is the physical pixel count of the display. The viewport is the area the browser gives the page — smaller because of toolbars, and it changes as you resize the window. When building a responsive site, the viewport is what counts.
What is device pixel ratio?
On Retina displays and modern phones, each "CSS pixel" is made up of 2 or 3 physical pixels. An iPhone 390 CSS pixels wide actually renders 1170 pixels. That is why images need to be twice the size to look sharp — and exactly why they are worth compressing, or the file weight doubles along with them.
Common breakpoints
- Mobile: up to 640px
- Tablet: 641–1024px
- Desktop: 1025px and up
Frequently asked questions
What is the difference between screen resolution and viewport?
Screen resolution is the physical pixel count of the display and never changes. The viewport is the area the browser gives the page — smaller because of toolbars and scrollbars, and it changes as you resize the window. When building a responsive site, the viewport is what counts, not the resolution.
What is device pixel ratio?
The ratio of physical pixels to CSS pixels. On Retina displays and modern phones, each CSS pixel is made of 2 or 3 physical pixels. An iPhone 390 CSS pixels wide actually renders 1170 — which is why a 390-pixel-wide image looks soft on it, and why you serve images at twice the size.
Which breakpoints should I use?
The common set: mobile up to 640 pixels, tablet 641–1024, desktop 1025 and up. But do not design for specific devices — widen your window gradually and add a breakpoint exactly where the design starts to look wrong. That approach ages far better.
Why do the numbers change when I move the window?
Because they are measured live. Viewport size and orientation update on every change, and even the pixel ratio shifts when you drag a window between a standard and a Retina display, or change the browser zoom.
How do I know which resolution to design for?
Do not guess — measure. Google Analytics breaks your actual visitors down by screen size under Audience. Most traffic today is mobile at 360–430 CSS pixels wide, but for a B2B site the picture can be completely reversed.
Is this data sent to you?
No. Everything is read from the browser's screen and window objects and displayed locally. No data leaves your device.