Screen Resolution Reference

How to use it

1. Type into search devices to filter by name, for example iPhone, Pixel or iPad.
2. Pick a category: all, phones, tablets, laptops or displays.
3. Read the table: physical pixels, logical CSS px, DPR and the browser viewport.
4. Press Filter after changing the search, then use Copy to grab the whole filtered table as text.

Common use cases

• Breakpoint planning - check which logical pixel widths your layout has to serve.
• Image sizing - decide export sizes for a hero image by multiplying the CSS px by the DPR.
• Device testing - confirm emulator metrics against the published specs of a real device.
• Spec sheets - quote a device resolution in a design document with the exact CSS px figure.

Why it stays private

The table is a constant built into the page, and search and copy run in the browser. No queries are sent anywhere, and the tool works offline.

FAQ

Q: What does DPR mean? A: Device pixel ratio: how many physical pixels make one CSS pixel. A DPR of 3 means a 300 px CSS box covers 900 physical pixels, so lines and text look sharp.

Q: Why is the logical width not the physical width divided by DPR? A: It is, but vendors round the result to whole pixels for the CSS grid, so published logical sizes can differ by a pixel or two from a raw division.

Q: What is the difference between the viewport and the screen? A: The viewport is the area the page actually gets inside the browser window, so it is smaller than the screen once browser chrome and system bars are counted. Laptops and displays vary with window size.

Q: How current is the data? A: The table lists widely documented public figures for each device. Manufacturers sometimes ship regional variants with different panels, so treat it as a reference for planning, not a dealer statement.