Your screen resolution is shown in the first box on this page, measured by your browser as you load it. It is reported in CSS pixels; multiply by the device pixel ratio for physical pixels. The page also shows your browser's viewport, which is the size your website actually gets, and it updates live as you resize.
| Measure | What it is |
|---|---|
| Screen | The whole display, in CSS pixels |
| Viewport | The visible page area inside the browser window |
| Device pixel ratio | Physical pixels per CSS pixel (2 or 3 on most phones) |
| Physical resolution | Screen size multiplied by the pixel ratio |
Updated
Screen size, viewport size, device pixel ratio, orientation and colour depth, read live from your browser. It also tells you which Tailwind and Bootstrap breakpoint the current window falls in, with media queries to copy and a table of common device sizes.
| Framework | Breakpoint | Applies from |
|---|---|---|
| Tailwind CSS | sm | 640px |
| Tailwind CSS | md | 768px |
| Tailwind CSS | lg | 1024px |
| Tailwind CSS | xl | 1280px |
| Tailwind CSS | 2xl | 1536px |
| Bootstrap 5 | sm | 576px |
| Bootstrap 5 | md | 768px |
| Bootstrap 5 | lg | 992px |
| Bootstrap 5 | xl | 1200px |
| Bootstrap 5 | xxl | 1400px |
| Type | Device or setting | Viewport (CSS px) | Pixel ratio | Physical pixels |
|---|---|---|---|---|
| Phone | iPhone SE (2nd and 3rd gen) | 375 × 667 | 2 | 750 × 1334 |
| Phone | iPhone 13 and 14 | 390 × 844 | 3 | 1170 × 2532 |
| Phone | iPhone 15 and 16 | 393 × 852 | 3 | 1179 × 2556 |
| Phone | iPhone 16 Pro | 402 × 874 | 3 | 1206 × 2622 |
| Phone | iPhone 15 Plus and 16 Plus | 430 × 932 | 3 | 1290 × 2796 |
| Phone | iPhone 16 Pro Max | 440 × 956 | 3 | 1320 × 2868 |
| Phone | Samsung Galaxy S24 | 360 × 780 | 3 | 1080 × 2340 |
| Phone | Google Pixel 8 | 412 × 915 | 2.625 | 1082 × 2402 |
| Tablet | iPad mini (6th gen) | 744 × 1133 | 2 | 1488 × 2266 |
| Tablet | iPad (10th gen) | 820 × 1180 | 2 | 1640 × 2360 |
| Tablet | iPad Pro 11-inch (4th gen) | 834 × 1194 | 2 | 1668 × 2388 |
| Tablet | iPad Pro 12.9-inch | 1024 × 1366 | 2 | 2048 × 2732 |
| Laptop | HD laptop | 1366 × 768 | 1 | 1366 × 768 |
| Laptop | Full HD at 125% scaling | 1536 × 864 | 1.25 | 1920 × 1080 |
| Laptop | MacBook Air 13-inch (M2, default) | 1470 × 956 | 2 | 2940 × 1912 |
| Desktop | Full HD monitor | 1920 × 1080 | 1 | 1920 × 1080 |
| Desktop | QHD monitor | 2560 × 1440 | 1 | 2560 × 1440 |
| Desktop | 4K monitor at 150% scaling | 2560 × 1440 | 1.5 | 3840 × 2160 |
A CSS pixel is a unit of length, not a dot on the screen. On a phone with a pixel ratio of 3, a 100 by 100 CSS pixel box is drawn with 300 by 300 physical pixels. That is why a phone with a 1179 pixel wide panel tells websites it is 393 pixels wide: the browser shows a page that reads at a comfortable size, and draws it with extra detail.
For layout, only CSS pixels matter. For images, the physical pixels matter too, because an image that is exactly as wide as its box in CSS pixels will look soft on a screen with a ratio of 2 or 3.
Tailwind and Bootstrap are mobile first: styles without a prefix apply at every width, and each breakpoint adds rules from its minimum width upwards. md in Tailwind means 768 pixels and wider, not only tablets.
The breakpoint panel on this page measures the viewport the same way those frameworks' media queries do, so what it shows is the set of classes that would be active on this window right now.
Browsers report sizes in CSS pixels. When your operating system scales the display, for example to 150% on a 4K monitor or on any Retina Mac, one CSS pixel covers several physical pixels. Multiply the screen size by the device pixel ratio shown here to get the physical resolution.
Screen size is the whole display. Viewport size is the part of the browser window that shows the page, which excludes the address bar, tabs, toolbars and any docked panels. Websites lay out against the viewport, so that is the number to use for responsive design.
It is the number of physical pixels used to draw one CSS pixel in each direction. A ratio of 1 is a standard display, 2 is common on laptops with high-density screens and tablets, and 3 is common on phones. It also changes when you zoom the page.
Start with your framework's defaults, which are listed on this page for Tailwind and Bootstrap, then add a breakpoint wherever your own content starts to look cramped or stretched. Breakpoints should follow the content, not specific devices.
No. The values are read in your browser and shown on the page. They are not sent to us or saved.
Related: PX to REM converter, Image cropper for web sizes, Social media image sizes, CSS grid generator, All free tools.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.