WebBuilding

Devices and hardware

Computer monitors and screen sizes

Summary

A computer monitor's size and resolution decide how much of a web page fits on screen and how sharp it looks. In January 2000, 71% of visitors to the tutorial site W3Schools had screens smaller than 1024 by 768 pixels; that size became the usual design target by the mid-2000s, before wide laptop screens, high-density Retina displays from 2010 and phones forced layouts to adapt. As of September 2026, StatCounter finds 1920 by 1080 on 28.07% of desktop page views, while mobile devices make up 58.99% of all web traffic.

Web Building Encyclopedia · Devices and hardware · Last reviewed October 22, 2026 · 9 min read

What screen size and resolution mean

A computer monitor is the screen a desktop or laptop computer uses to show its picture. For anyone building on the World Wide Web, its importance is simple: the screen sets how much of a page a visitor sees at once and how large each part of it looks.

Four measurements describe a screen, and they are easy to mix up:

  • Screen size. The length of the visible picture from one corner to the opposite corner, in inches. Apple’s iPhone 4, for example, had a 3.5-inch screen.1
  • Resolution. The number of pixels, the tiny dots of light that make up the picture, written as width by height. The same iPhone 4 screen had 960 by 640 pixels.1
  • Pixel density. How many pixels fit in each inch of screen, written as ppi (pixels per inch). Apple gave the iPhone 4’s density as 326 pixels per inch.1
  • Aspect ratio. The shape of the screen, width compared with height. A 640 by 480 screen is 4:3, close to square, and a 1920 by 1080 screen is 16:9, the wide shape of a television.

A web page does not fill the whole screen. It is drawn inside the web browser‘s window, an area called the viewport, which can be smaller than the screen and loses space to toolbars. CSS, the language that styles web pages, even has a unit for it: 1vw is 1% of the viewport’s width.2

CSS pixels and device pixels

The pixels in a page’s code are not always the pixels in the hardware. CSS defines its px unit as 1/96 of an inch.2 The CSS 2.1 specification ties that unit to a “reference pixel”: the visual angle of one pixel on a 96 dpi screen held at arm’s length. For a nominal arm’s length of 28 inches, it works out to about 0.0213 degrees, and one CSS pixel to about 0.26 mm.3

Defining the pixel as an angle means a CSS pixel should look roughly the same size to the reader on a phone held close or a monitor farther away, even though their hardware pixels differ greatly in size. The specification recommends that screens and other lower-resolution devices anchor their units to the pixel, while printers and similar high-resolution devices anchor them to real inches and centimeters.3

Browsers expose the gap between the two through a JavaScript property called devicePixelRatio: the number of hardware pixels used to draw one CSS pixel. Mozilla’s developer documentation, MDN, says a value of 1 means a classic 96 DPI display, a value of 2 is expected on HiDPI or Retina displays, and modern phone screens often report more than 2.4

Zooming changes the ratio too. When someone zooms a page in, each CSS pixel grows, so devicePixelRatio rises. Pinch-zooming does not change it, because it magnifies the page without changing the size of a CSS pixel.4

The fixed-width era: designing for one screen

The 640 by 480 screen is older than the web itself. IBM announced VGA, its Video Graphics Array, on April 2, 1987, as part of its PS/2 line of personal computers. An IEEE Computer Society history says the standard lasted more than 25 years, and notes that the monitors offered at the time showed 640 by 480 pixels.5 Its success brought a wave of compatible clone chips from other companies.5

In the 2000s, many designers planned pages around a minimum screen resolution, one screen size they assumed their visitors had.6 W3Schools, a web tutorial site, publishes the screen sizes recorded in its own logs going back to January 2000. In January 2000, 71% of its visitors had screens smaller than 1024 by 768 pixels, 25% had exactly 1024 by 768 and 4% had more. By January 2006, 1024 by 768 had risen to 57%.7 The site warns that its visitors may not match other sites’, since some audiences use professional hardware and others older computers.7

The usability researcher Jakob Nielsen summed up the state of things on July 30, 2006. About 60% of monitors were set to 1024 by 768, about 17% to 800 by 600, and about 18% to 1280 by 1024 or more, while fewer than half a percent still used 640 by 480.8 He advised optimizing pages for 1024 by 768, but with a liquid layout, one that stretches to fill the visitor’s window, rather than a frozen layout that is always the same size.8

Many designers chose a fixed width instead. The 960 Grid System, created by Nathan Smith, offered ready-made layouts 960 pixels wide in 12, 16 or 24 columns. Its site explains the number: monitors supported at least 1024 by 768, and 960 divides evenly by many numbers, including 2, 3, 4, 5, 6, 8, 10, 12, 16 and 24.9 Its home page now points visitors who want a responsive grid to a different framework.9

In “Fluid Grids,” published in A List Apart on March 3, 2009, the designer Ethan Marcotte questioned the habit. He called the idea of a minimum screen resolution “a little white lie,” because it pictured users who “always browse with a maximized 1024×768 window.”6 He wrote that almost all the grid-based designs he could find were rigidly fixed-width.6

Wider and sharper screens

Screens kept growing. In the W3Schools logs, 1024 by 768 fell to 36% in January 2009, while larger screens made up 57%. A 1920 by 1080 row first appears in January 2010, at 2%.7

Laptops brought a wide size of their own. The 1366 by 768 resolution appears in the W3Schools table in January 2012 at 19% and reached 35% in January 2016 and January 2017. In the last row of the table, January 2023, 1920 by 1080 had 18.4% and 1366 by 768 had 18.2%, while 47.2% of visitors had screens larger than any listed size and 1024 by 768 was down to 0.7%.7

Screens also became sharper. Apple introduced the iPhone 4 on June 7, 2010, with what it called a Retina display, with four times as many pixels as the iPhone 3GS.1 On June 11, 2012, it brought the idea to laptops with a 15-inch MacBook Pro, part of its Macintosh line, whose Retina display had over 5 million pixels at 220 pixels per inch, “3 million more than an HD television.”10

High-density screens created new work for web designers. An image 320 pixels wide fills 320 CSS pixels, but on a screen with two hardware pixels per CSS pixel it has only half the detail the screen can show, so it looks soft. HTML answered with the srcset attribute, which lists several versions of an image and lets the browser choose. In MDN’s example, a device with two or more device pixels per CSS pixel loads the 640-pixel file for a 320-pixel slot.11 The picture element goes further, offering different crops for different screen sizes.11 MDN also recommends vector images such as SVG wherever possible, because they are small and scale well, while noting they suit simple graphics and interface elements rather than photos.11

The W3C‘s Media Queries specification, which became a Recommendation on June 19, 2012, lets style sheets test for density too. Its resolution feature tests the pixel density of the output device, in units of dpi or dpcm, dots per CSS inch or centimeter.12

A new name for larger screens came from television. In October 2012 the Consumer Electronics Association, a US trade group, chose the name Ultra High-Definition, or Ultra HD, for displays with at least 8 million active pixels: at least 3840 horizontally and 2160 vertically, in a shape at least as wide as 16 by 9.13 Such screens are often called 4K. They remain a small slice of desktop web traffic: no 4K size appears among StatCounter’s six most common desktop resolutions in September 2026, where the largest is 2560 by 1440 at 3.95%.14

Phones and tablets change the question

By traffic, the largest group of screens on the web is now phones, not monitors. StatCounter, whose figures are based on more than 3 billion page views a month,15 found that 58.99% of worldwide page views came from mobile devices in September 2026, against 39.26% from desktop computers and 1.76% from tablets.16

Phones forced browsers to deal with pages designed for monitors. MDN explains the approach many phone browsers took: they lay a page out in a virtual window wider than the screen, for example 980 pixels, then shrink the result to fit, and the reader zooms and pans.17 The entries on the iPhone, Android smartphones and the iPad and tablets cover how each device met desktop pages.

That trick breaks pages built for small screens: with a 980-pixel virtual window, style rules meant for screens 640 or 480 pixels wide never apply. A single line of HTML, the viewport meta tag, fixes it. MDN gives the recommended setting as width=device-width, which sets the viewport to match the device’s width.17

Media queries made the other half possible. They let a style sheet apply rules only when a condition is true, such as the width of the display area or its aspect ratio.12 In an article published on May 25, 2010, Ethan Marcotte named “fluid grids, flexible images, and media queries” as the three ingredients of what he called responsive web design: one site whose layout adapts to the screen it is viewed on.18 How Google came to judge sites by their phone version is covered in mobile-first indexing.

Screen sizes on the web today

As of September 2026, StatCounter’s worldwide figures show how wide the range has become. The most common sizes, measured across all devices and on desktop computers alone, are:

RankAll devicesShareDesktop onlyShare
11920 by 108010.71%1920 by 108028.07%
2414 by 8968.05%1536 by 86410.00%
3360 by 8004.79%1366 by 7687.95%
4384 by 8324.57%1280 by 7204.71%
51536 by 8643.81%2560 by 14403.95%
6390 by 8443.65%1280 by 12003.64%

Sources: StatCounter Global Stats, all platforms and desktop, worldwide, September 2026.1514 The six desktop sizes together account for 58.32% of desktop traffic, so the rest is spread over many other sizes.14

The phone sizes in the list, such as 360 by 800, are much smaller than the hardware pixel counts phone makers advertise. Browsers report the screen’s width in CSS pixels, not hardware pixels.19 A phone whose panel is 1080 hardware pixels across and whose devicePixelRatio is 3 reports a width of 360. Some desktop entries are best read the same way: 1536 by 864 is exactly 1920 by 1080 divided by 1.25, the size a 1920 by 1080 screen would report with a devicePixelRatio of 1.25.4 StatCounter does not say how many of its 1536 by 864 visitors use such a setting.

Accessibility rules use CSS pixels too. Success criterion 1.4.10, Reflow, added in version 2.1 of the Web Content Accessibility Guidelines, asks that content can be presented without loss of information or function, and without scrolling in two directions, at a width equivalent to 320 CSS pixels.2021 The guidance explains that 320 CSS pixels is what a desktop window 1280 pixels wide becomes at 400% zoom, so a page that passes also works for someone who zooms a desktop browser to 400%.21

Parts of a layout can now respond to their own space instead of the screen. Container queries, a CSS feature, apply styles based on the size of an element’s container rather than the viewport, so a component such as a card can be reused anywhere on a page without knowing where it will be placed.22

Timeline

  1. StatCounter: 1920 by 1080 is 28.07% of desktop page views, and mobile is 58.99% of all traffic14
  2. W3Schools logs: 1920 by 1080 (18.4%) edges past 1366 by 768 (18.2%)7
  3. 1366 by 768 reaches 35% in the W3Schools logs7
  4. The Consumer Electronics Association's Ultra HD name for 3840 by 2160 screens is reported13
  5. Media Queries, with width and resolution tests, becomes a W3C Recommendation12
  6. Apple's 15-inch MacBook Pro brings a 220 ppi Retina display to laptops10
  7. Apple announces the iPhone 4 and its 326 ppi Retina display1
  8. Ethan Marcotte names responsive web design18
  9. 1920 by 1080 first appears in the W3Schools logs, at 2%7
  10. Ethan Marcotte's "Fluid Grids" questions designing for a minimum screen resolution6
  11. Jakob Nielsen reports about 60% of monitors at 1024 by 768 and advises liquid layouts8
  12. 71% of W3Schools visitors have screens smaller than 1024 by 7687
  13. IBM announces VGA graphics with its PS/2 computers5

What it means for your website

No single screen size is safe to design for. As of September 2026, the most common size on StatCounter’s list accounts for only 10.71% of page views across all devices, and the top six together account for about 36%.15 A site has to work from a phone held in one hand to a wide monitor on a desk.

  • Look at your own numbers. W3Schools warns that its screen statistics may not match your site, because audiences differ.7 Check the screen sizes your own analytics report before deciding which layouts matter most.
  • Check for the viewport tag. View your page source and search for name=”viewport”. Without width=device-width, phone browsers may draw your page in a 980-pixel window and shrink it, and your mobile styles never run.17
  • Test at 320 pixels wide. Narrow your browser window, or zoom a 1280-pixel window to 400%. If text runs off the side or needs sideways scrolling, the page likely fails the WCAG reflow test (parts that need a two-dimensional layout, such as maps or data tables, are exempt).21
  • Serve sharp images, sized ahead of time. Upload photos at about twice the width they appear on the page, use srcset so phones do not download desktop-sized files, and use SVG for logos and icons.11 Give every image width and height attributes so the browser can reserve space before it loads, which stops the page from jumping as it fills in.23
  • Retire fixed widths. An older site built at one width in pixels, such as the 960-pixel layouts of the late 2000s, will either scroll sideways on a phone or be shrunk to fit, with text too small to read without zooming.17 That is usually a sign the site needs more than a fresh coat of paint; our guide to updating or redesigning a website explains the options.

When you compare templates or themes, preview each one on a phone as well as a desktop. Our glossary entry on responsive design explains the idea in short, and how a website works shows where the browser fits in.

See also

References

  1. Apple Presents iPhone 4. Apple Newsroom. 2010-06-07. accessed October 22, 2026.
  2. CSS Values and Units Module Level 4 (Working Draft). World Wide Web Consortium. 2024-03-12. accessed October 22, 2026.
  3. Syntax and basic data types (CSS 2.1 specification, section 4). World Wide Web Consortium. accessed October 22, 2026.
  4. Window: devicePixelRatio property. MDN Web Docs, Mozilla. accessed October 22, 2026.
  5. Famous Graphics Chips: IBM's VGA. Jon Peddie, IEEE Computer Society, Chasing Pixels. 2019-03-12. accessed October 22, 2026.
  6. Fluid Grids. Ethan Marcotte, A List Apart, issue 279. 2009-03-03. accessed October 22, 2026.
  7. Browser Display Statistics. W3Schools. accessed October 22, 2026.
  8. Screen Resolution and Page Layout. Jakob Nielsen, Nielsen Norman Group. 2006-07-30. accessed October 22, 2026.
  9. 960 Grid System. Nathan Smith, 960.gs. accessed October 22, 2026.
  10. Apple Introduces All New MacBook Pro with Retina Display. Apple Newsroom. 2012-06-11. accessed October 22, 2026.
  11. Using responsive images in HTML. MDN Web Docs, Mozilla. accessed October 22, 2026.
  12. Media Queries (W3C Recommendation). World Wide Web Consortium. 2012-06-19. accessed October 22, 2026.
  13. CEA tags 4K displays 'Ultra High-Definition'. TVTechnology. 2012-10-25. accessed October 22, 2026.
  14. Desktop Screen Resolution Stats Worldwide. StatCounter Global Stats. 2026-09. accessed October 22, 2026.
  15. Screen Resolution Stats Worldwide. StatCounter Global Stats. 2026-09. accessed October 22, 2026.
  16. Desktop vs Mobile vs Tablet Market Share Worldwide. StatCounter Global Stats. 2026-09. accessed October 22, 2026.
  17. <meta name="viewport">. MDN Web Docs, Mozilla. accessed October 22, 2026.
  18. Responsive Web Design. Ethan Marcotte, A List Apart, issue 306. 2010-05-25. accessed October 22, 2026.
  19. Screen: width property. MDN Web Docs, Mozilla. accessed October 22, 2026.
  20. What's New in WCAG 2.1. W3C Web Accessibility Initiative. 2023-10-05. accessed October 22, 2026.
  21. Understanding Success Criterion 1.4.10: Reflow. W3C Web Accessibility Initiative. accessed October 22, 2026.
  22. Container queries. MDN Web Docs, Mozilla. accessed October 22, 2026.
  23. Optimize Cumulative Layout Shift. Addy Osmani and Barry Pollard, web.dev, Google. 2020-05-05. accessed October 22, 2026.

Web Building Encyclopedia. First published October 22, 2026. Last reviewed October 22, 2026. Every fact on this page is linked to a source we opened. Spotted an error? Write to [email protected].