Frequently Asked Questions

What is the difference between my screen size and my viewport?

Screen size refers to the maximum number of physical or scaled pixels your monitor can display — for example, 1920×1080 on a Full HD display. This is the total canvas your operating system works with.

Your viewport is the actual visible area inside your browser window. Since browsers have toolbars, tabs, address bars, and scrollbars, your viewport is almost always smaller than your screen resolution. For instance, on a 1920×1080 monitor, your viewport might be 1920×939. SizeScreen reports both values so you can understand exactly how much space your website actually has.

Why does my screen resolution look different in the browser vs. my device settings?

Operating systems and browsers apply display scaling to ensure content remains readable at high pixel densities. On Windows, this is controlled in Display Settings (e.g., 125% or 150% scaling). On macOS, similar scaling is set through Displays preferences.

When scaling is applied, the browser reports a logical resolution that is smaller than the physical resolution. SizeScreen's tool detects the logical resolution (what your browser actually uses for CSS layout) and the device pixel ratio (how many physical pixels map to each logical pixel), giving you both figures simultaneously.

How is screen size measured in inches?

Monitor screen size is measured diagonally — from one corner to the opposite corner, not including the bezel (the border around the screen). A "27-inch monitor" has a 27-inch diagonal measurement. SizeScreen can estimate your screen's diagonal size using your display resolution, device pixel ratio, and screen DPI reported by your system — though the estimate may vary slightly from physical measurements due to how browsers report display data.

What does PPI mean?

PPI stands for Pixels Per Inch. It measures the pixel density of an electronic display — how many individual pixels fit within a single inch of screen space. A higher PPI means the display is sharper and individual pixels are harder to discern with the naked eye.

Apple's Retina displays typically have a PPI of 220+ (MacBook) and 326+ (iPhone), at which point individual pixels become invisible at normal viewing distances. You can calculate your display's PPI using our free PPI Calculator — just enter your resolution and screen size in inches.

What is Device Pixel Ratio (DPR)?

Device Pixel Ratio (DPR) is the ratio between physical device pixels and logical CSS pixels. A DPR of 2.0 means that every one CSS pixel is rendered by 4 physical pixels (2×2 grid), resulting in Retina-quality sharpness.

Common DPR values: standard desktops use 1.0×, Windows scaling at 125% gives ~1.25×, MacBook Retina gives 2.0×, most modern iPhones use 3.0×. SizeScreen detects and displays your DPR automatically.

Why is my phone's resolution showing smaller than the spec sheet?

Modern smartphones have very high-density physical displays, but browsers report logical (CSS) pixels rather than raw hardware pixels. For example, an iPhone 16 Pro Max has a physical resolution of 1320×2868, but its 3.0× DPR means websites see it as 440×956 CSS pixels. This is intentional — it prevents web pages from appearing microscopic on tiny high-density screens, and ensures a consistent design experience for developers.

What is Color Depth?

Color depth (also called bit depth) is the number of bits used to represent the color of a single pixel. A 24-bit color depth (True Color) can represent over 16.7 million unique colors, which is the standard for modern displays. High-end displays may support 10-bit color (over 1 billion colors), which eliminates banding in gradients and is preferred for photo/video editing. Modern browsers use your system's maximum color depth automatically.

What is a CSS breakpoint?

A CSS breakpoint is a viewport width at which your website's layout changes to better suit the current screen size. They are defined using CSS @media queries. Common breakpoints used by frameworks like Tailwind CSS include:

• sm: 640px — small phones
• md: 768px — tablets
• lg: 1024px — laptops
• xl: 1280px — desktops
• 2xl: 1536px — wide monitors

Use our Responsive Tester to preview your website at any of these breakpoints.

What is the best screen resolution for web development?

There is no single "best" resolution — you should design for a range. The most common viewport widths globally are: 360–414px (mobile phones), 768–834px (tablets), 1280–1440px (laptops and desktops). Designing with a mobile-first approach and progressively scaling up using CSS media queries ensures the best compatibility across all devices. SizeScreen's Compare Sizes tool helps you visualize size differences between devices.

Is SizeScreen free to use?

Yes — 100% free, forever. SizeScreen requires no account, no registration, no email, and no payment. All screen detection tools run entirely within your browser using JavaScript. We do not collect, transmit, or store any personal information. You can use every tool on our site completely anonymously.

Does SizeScreen work on mobile phones and tablets?

Absolutely. SizeScreen is built mobile-first and works on any device with a modern web browser — smartphones, tablets, laptops, desktops, and even smart TVs. The screen detection tool is especially useful on mobile devices, where the difference between physical resolution and CSS viewport can be most confusing.

Does SizeScreen collect any data about my screen or device?

No. All measurements — screen resolution, viewport size, device pixel ratio, estimated diagonal size — are computed entirely in your browser using the JavaScript APIs (window.screen, window.innerWidth, window.devicePixelRatio). None of this information is sent to our servers. Please see our Privacy Policy for full details.

Why are ads shown on SizeScreen?

SizeScreen is free to use for everyone. To keep the service running and free, we display advertisements through Google AdSense. These are non-intrusive, contextually relevant ads. Google may use cookies to serve personalized ads based on your browsing history. You can read more about how this works on our AdSense Disclaimer page. Ad revenue helps us maintain and improve the platform without charging users.

How accurate is the screen size estimate?

The screen size estimate is based on the resolution and DPI data reported by your browser — which itself comes from your operating system. On most devices this is highly accurate. However, some operating systems report a fixed or scaled DPI value rather than the actual physical screen DPI, which can cause estimates to vary by 10–20% on some older or unusual configurations. For the most accurate physical screen size, we recommend using a ruler or checking your manufacturer's specifications.