Device database · 172 models · 18 brands

All devices: CSS viewport, density, and screen resolution

Smartphones, tablets, computers, and smartwatches, each with the width your media queries rely on, its pixel density, and its panel resolution. 81 of these devices can be tested directly in your browser.

An iPhone, a Pixel, an iPad, and an Android phone each displaying a website in the Mobile FIRST simulator

Devices by brand

18 brands · 172 models

Each model leads to its sheet: CSS viewport, pixel density, manufacturer resolution, diagonal, User-Agent, and ready-to-copy media queries. The search filters by name, brand, pixel width, or year.

172 devices displayed

Samsung Smartphones 53 models

Samsung Tablets and computers 3 models

All Samsung devices →

Apple Smartphones 45 models

Apple Tablets, computers and smartwatches 8 models

All Apple devices →

Google 17 models

All Google devices →

OnePlus 11 models

All OnePlus devices →

Huawei 9 models

All Huawei devices →

Xiaomi 6 models

All Xiaomi devices →

Honor 4 models

Generic Devices 2 models

HTC 2 models

Motorola 2 models

Sony 2 models

Zebra 2 models

Dell 1 model

Infinix 1 model

LG 1 model

Microsoft 1 model

OPPO 1 model

Sonoff 1 model

Latest devices added

Updated with each release

The most common viewport widths

Six widths cover most of the mobile market. These should be checked first before adding more breakpoints in your stylesheet.

Most represented CSS viewport widths, with their typical models and pixel densities
CSS Width Representative Devices Density Relevant Models
360 px Infinix Hot 70Samsung Galaxy S24 (2024)Samsung Galaxy S22 (2022) 2x, 3x, 4x 54 models
375 px Apple iPhone 13 Mini (2021)Apple iPhone SE (2020)Apple iPhone 11 Pro 2x, 3x 8 models
390 px Apple iPhone 14 (2022)Apple iPhone 14 PRO (2022)Apple iPhone 13 (2021) 3x 6 models
393 px Apple iPhone 16 (2024)Apple iPhone 15 (2023)Apple iPhone 15 PRO (2023) 2.75x, 3x 12 models
412 px Galaxy S26 ULTRAGoogle Pixel 10Motorola Razr 70 Ultra 2.625x, 3x, 3.5x, 4x 40 models
414 px Apple iPhone 11Apple iPhone 11 Pro MaxApple iPhone XR 2x, 3x, 3.5x 9 models

Test your site on a real device without buying it

Three steps, about thirty seconds, no account to create.

  1. 01 Install the extension It adds to Chrome, Edge, Firefox, Safari, or Opera with one click, no account needed.
  2. 02 Choose the device 81 models are ready to use, with their exact CSS viewport, pixel density, and User-Agent.
  3. 03 Open your site alongside The rendering appears in the device frame, including on a localhost address, and you can export a screenshot or video.

How to read a device's characteristics

The CSS viewport is the only one of the three measurements your stylesheet handles. It's the width your breakpoints compare to, deciding the number of columns displayed and the image version served. An iPhone 16 advertised at 1179 pixels by its manufacturer actually works on 393 CSS pixels: it's this second value that should be written in a media query.

Pixel density, or device pixel ratio, is the ratio between the two. At 3x, each CSS pixel is rendered by nine physical pixels: an image exported at its display size will appear softened, and a version two or three times larger should be provided. The manufacturer resolution is only used to prepare these exports and read audience statistics, never to write CSS.

The diagonal and ratio complete the picture: two devices with the same viewport can have very different heights, which changes everything for a sticky menu or a footer banner. That's why each sheet also provides a list of models with strictly identical formats: validating one of them is enough to validate the others.

Frequently asked questions

What is a device's CSS viewport?

It's the width, in CSS pixels, of the browser's display area on that device. It's the value your media queries compare to, and it's almost always smaller than the resolution advertised by the manufacturer.

What's the difference between CSS viewport and screen resolution?

Resolution is the number of physical pixels on the panel, the CSS viewport is the logical width your stylesheet works with. The ratio between the two is pixel density: a 1179-pixel screen at 3x density offers 393 CSS pixels.

What widths should be targeted for breakpoints?

Among the 172 referenced devices, the most represented widths are 360 px, 412 px, 393 px. Checking these first covers the majority of the mobile market before adding finer breakpoints.

Why does a foldable smartphone have two pages?

Because it has two viewports. The cover screen and the inner screen share neither width, height nor aspect ratio: a layout validated folded is not validated unfolded, and the device switches from one to the other mid-session. Each state therefore has its own page and its own media queries.

How to test your site on these devices?

With the Mobile FIRST extension: it replicates the viewport, pixel density, User-Agent, and touch events of 81 of these models, directly in your browser, including on a localhost address.

Is the list up to date?

Yes. The catalog includes 172 models across 18 brands, and it's updated with each new device release.

Test your site on 81 of these devices without buying a single one

The table provides the measurements. The extension displays your site at the device's exact viewport, with its User-Agent and touch events.

  • 81 devices ready to use, from older models to this year's releases
  • Screenshots and videos exported in the device's format
  • Works on your local environments and pre-productions
Install for Chrome Install for Firefox

Free · 4.9/5 on 5,100 reviews
1,500,000+ users