Every size a screen has been
22 screens · 1977–2023Display modes and device screens from 1977 to now, with the width a layout actually gets, and an instrument for looking at any of them.
The finding. A phone gained twenty times the pixels between 2007 and 2023 and one and a quarter times the room to lay out in: 320 CSS pixels to 393. The two numbers stopped being the same in 2010, when the iPhone 4 arrived with four times the pixels of its predecessor and exactly the same layout width. The commonest screen in the world today is 360 CSS pixels wide — a third of what a desktop had in 1990, and within touching distance of the 320 an IBM CGA had in 1981.
Two numbers that stopped being the same in 2010. A screen has device pixels, which the panel has, and CSS pixels, which a layout is measured in. Until the iPhone 4 they were the same number. It arrived with four times the pixels of the phone before it and exactly the same layout width — 320 — because the extra pixels went into sharpness, not into room. Everything below lays out at its CSS width, which is what a browser actually does.
Report a missed bin collection
Tell us the address and the day it was due. Most reports are collected within two working days.
You will need the postcode and the type of bin. If the bin was not put out by 7am on collection day we cannot collect it until the next scheduled round.
What just changed, and what did not. The words are identical at every size. What moves is the number of columns, whether the navigation is a row or a button, whether the sidebar sits beside the text or under it, and how big the type is. That is the whole of responsive design — deciding what a smaller screen should become, not shrinking what a bigger one had.
Every row
| Screen | Year | Device px | CSS px | DPR | What it was |
|---|---|---|---|---|---|
| Apple II high-resolutionhome computer | 1977 | 280×192 | 280×192 | 1× | Six colours, and only in fixed positions. The first screen most people designed anything for.Apple II Reference Manual |
| CGAdesktop | 1981 | 320×200 | 320×200 | 1× | Four colours from a fixed palette. The width a phone would return to twenty-six years later.IBM Color/Graphics Monitor Adaptor |
| CGA, two coloursdesktop | 1981 | 640×200 | 640×200 | 1× | Same adaptor, double the width, half the colours. Pixels were not square.IBM Color/Graphics Monitor Adaptor |
| Macintosh 128Kdesktop | 1984 | 512×342 | 512×342 | 1× | Black and white, no grey, 72 pixels to the inch — chosen so a point on screen was a point on paper.Macintosh Hardware Reference |
| EGAdesktop | 1984 | 640×350 | 640×350 | 1× | Sixteen colours at once from a palette of sixty-four.IBM Enhanced Graphics Adaptor |
| VGAdesktop | 1987 | 640×480 | 640×480 | 1× | The first mode with square pixels and the baseline everything assumed for a decade.IBM PS/2 Video Graphics Array |
| SVGAdesktop | 1989 | 800×600 | 800×600 | 1× | The width the web was built for through the late nineties.VESA Super VGA |
| XGAdesktop | 1990 | 1024×768 | 1024×768 | 1× | The long-running default. "Designed for 1024" outlasted the hardware by years.IBM Extended Graphics Array |
| SXGAdesktop | 1990 | 1280×1024 | 1280×1024 | 1× | 5:4 — taller than it is wide relative to everything before or since.VESA |
| WXGAdesktop | 2003 | 1280×800 | 1280×800 | 1× | The laptop shape. Screens got wider and shorter, and pages got longer.VESA |
| iPhonephone | 2007 | 320×480 | 320×480 | 1× | The same 320 pixels the IBM CGA had in 1981, now in a pocket, and the number the mobile web was built on.Apple |
| HD 720pdesktop | 2007 | 1280×720 | 1280×720 | 1× | A broadcast standard that became a computer one.ITU-R BT.709 |
| WSXGA+desktop | 2007 | 1680×1050 | 1680×1050 | 1× | 16:10, the shape most design tools still open at.VESA |
| Full HD 1080pdesktop | 2007 | 1920×1080 | 1920×1080 | 1× | Still the commonest desktop resolution in the world.ITU-R BT.709 |
| iPhone 4phone | 2010 | 640×960 | 320×480 | 2× | Four times the pixels of the iPhone before it and exactly the same layout width. This is where device pixels and CSS pixels part company.Apple |
| iPadtablet | 2010 | 1024×768 | 1024×768 | 1× | Exactly XGA. A 2010 tablet and a 1990 workstation lay out identically.Apple |
| WQHD 1440pdesktop | 2010 | 2560×1440 | 2560×1440 | 1× | Often driven at a scale factor, so the layout width is not the panel width.VESA |
| 4K UHDdesktop | 2013 | 3840×2160 | 3840×2160 | 1× | Nearly always scaled. A 4K screen at 200% lays out as 1920.ITU-R BT.2020 |
| iPhone 6phone | 2014 | 750×1334 | 375×667 | 2× | The first time the layout width moved at all: 320 to 375.Apple |
| iPad Airtablet | 2022 | 1640×2360 | 820×1180 | 2× | 820 CSS pixels — between a phone and a laptop, which is why the middle breakpoint exists.Apple |
| Common Androidphone | 2023 | 1080×2400 | 360×800 | 3× | 360 CSS pixels — the commonest layout width in the world, and narrower than a 1990 desktop by two thirds.aggregate of reported device metrics |
| iPhone 15phone | 2023 | 1179×2556 | 393×852 | 3× | 393 CSS pixels wide. Sixteen years after the first iPhone, the layout is 73 pixels wider.Apple |
Why 320 keeps coming back
The IBM CGA was 320 pixels wide in 1981. The first iPhone was 320 pixels wide in 2007. The iPhone 4 was still 320 to lay out in, in 2010, with four times the pixels. It is not a coincidence so much as a floor: 320 is roughly the narrowest a line of readable text and a usable target can share.
Which is why the smallest number in your own layout spec matters more than the largest. Nobody has ever been let down by a design that worked at 320.
Source. IBM, VESA, ITU-R and Apple published specifications · published technical specifications, cited per row · retrieved 2026-09-02. This collection is compiled · standards and device specifications.
The documents. VESA standards · ITU-R BT.709 · Apple — Human Interface Guidelines, layout