Question 1

What is the difference between CSS pixels and physical pixels?

Accepted Answer

CSS pixels are the logical units used in web design (viewport dimensions). Physical pixels are the actual hardware dots on the screen. On high-DPI displays, one CSS pixel maps to multiple physical pixels — determined by the device pixel ratio (DPR). For example, an iPhone 15 Pro has a 393×852 CSS pixel viewport but a 1179×2556 physical pixel display (3x DPR).

Question 2

How do I know which CSS breakpoint a device uses?

Accepted Answer

Each device page shows which Tailwind CSS, Bootstrap, and Material UI breakpoint the device falls into based on its viewport width. For example, an iPhone SE (375px wide) falls into the Tailwind "default" range, while an iPad (820px wide) falls into the "md" range. You can also use the Breakpoint Visualiser tool to see this visually.

Question 3

Why do different phones have different viewport sizes?

Accepted Answer

Viewport size depends on screen physical dimensions, resolution, and the manufacturer's chosen DPR. Apple iPhones typically use 2x or 3x DPR, resulting in viewport widths between 375–440px. Android phones vary more widely, with Samsung Galaxy models often using 360px viewports and Google Pixels using 412px.

Question 4

How often is this database updated?

Accepted Answer

The device database is updated when major new devices launch — typically after Apple, Samsung, and Google announcements. The database currently includes devices from 2019 onwards, with a focus on models still commonly in use.

Question 5

Can I test my website at these viewport sizes?

Accepted Answer

Yes! Viewpo lets you preview your real deployments from Cloudflare Pages, Vercel, Netlify, and GitHub at any viewport size — including all the devices in this database. Try it free at viewpo.io — just paste a URL and see your site at any size.

Device Viewport Database

Frequently Asked Questions

Audit your site on any device