What Is My Screen Size?: Resolution & Viewport Checker

This tool measures and reports your screen’s resolution, viewport size, available display area, device pixel ratio, aspect ratio, color depth, and orientation using browser APIs. It updates live as you resize your browser window or rotate your device. You can also enter your screen’s diagonal size for more detailed calculations, like pixels per inch (PPI), pixels per degree (PPD), physical width and height, and estimated retina distance.

It reads what your browser can access directly from your system and presents the results in a clear, organized panel. The tool also displays browser zoom level estimates, safe area insets (for notched or rounded-corner devices), and basic device and browser information. There’s no need to install anything or plug in hardware, the test runs entirely in your browser. This makes it ideal for quickly diagnosing display issues, confirming settings, or comparing monitors like the Dell U2720Q or Samsung Odyssey G7.

Open the tool link in your preferred browser on the device you want to test. The tool immediately shows your screen’s resolution, current viewport, device pixel ratio, and other key specs. To see more detailed results, optionally enter your screen’s diagonal measurement (in inches or centimeters) in the provided field. This unlocks calculations for PPI, PPD, and estimated physical sizes.

Resize the browser window or rotate your device to see how the viewport and orientation values update in real time. There’s no need to refresh. If you have multiple monitors, move the browser window to each one and note how the reported resolution and available area change. This works with laptops, desktops, ultrawide monitors, tablets, and phones. For example, you can see how a 27-inch Dell S2721DGF compares to a 15.6-inch laptop panel.

Check the device and browser info panel for system details, which can help when troubleshooting compatibility or scaling issues. All results are local, no data is sent to a server.

The main values reported are:

• •Screen resolution: The full pixel grid your monitor is set to, such as 2560x1440 for many QHD monitors or 1920x1080 for typical laptops.
• •Viewport size: The area available to your browser window, excluding OS taskbars, window borders, and browser UI. This is what most web pages can actually use.
• •Device pixel ratio (DPR): The ratio between physical and logical pixels. A DPR of 2 means your device renders two hardware pixels for every CSS pixel, common on high-DPI devices like MacBook Pro Retina displays or Samsung Galaxy phones.
• •Aspect ratio: The proportion of width to height. Standard ratios include 16:9 (widescreen), 21:9 (ultrawide), and 3:2 (Surface devices).
• •Color depth: The number of bits used for color per pixel, usually 24 or 30 bits on modern systems.
• •Orientation: Portrait or landscape, based on how your device is held or how your monitor is rotated.
• •Safe area insets: Padding required for notched or rounded corner screens, relevant for phones like the iPhone 13 or some tablets.

If you enter the diagonal size, you get PPI (pixels per inch), PPD (pixels per degree, factoring in viewing distance), and estimated retina distance. These help you compare sharpness between displays, from 13.3-inch MacBooks to 32-inch gaming monitors like the Gigabyte M32U.

Values like browser zoom are estimated based on viewport and reported screen size. They are close, but not lab-grade precise, since browser zoom interacts with OS scaling and hardware in complex ways.

This tool addresses several everyday display issues:

• •Confusing screen scaling: Windows, macOS, and Linux all offer scaling and DPI settings. Sometimes, a 4K monitor like the Dell U2720Q doesn’t render at full sharpness because of OS-level scaling. The tool shows the effective viewport and DPR, so you can see what your browser and apps are actually using.
• •Misreported resolution: Laptops with hybrid graphics (like many Lenovo ThinkPads with Intel and NVIDIA GPUs) may sometimes report incorrect resolutions or scaling. This tool helps you verify what’s actually being used.
• •Multi-monitor setups: If you run multiple displays, like a main 1440p monitor and a secondary 1080p screen, you can move the browser window and see how the viewport changes. Useful for comparing color depth and available workspace between models like the ASUS TUF VG27AQ and BenQ PD2700U.
• •Hardware calibration: After updating drivers or changing your monitor (for example, switching from a 24-inch Acer to a 32-inch Gigabyte), you can quickly check if your system is using the right settings, including orientation and color depth.
• •Web design and development: Responsive layouts depend on accurate viewport size and DPR. The tool helps developers see exactly what users on different hardware will experience.

Scenario 1: Laptop with External Monitor

A user connects a Lenovo Legion 5 laptop (15.6-inch, 1920x1080) to a Dell U2720Q (27-inch, 3840x2160) monitor. By moving the browser window between screens, they see the screen resolution jump from 1920x1080 to 3840x2160, while the viewport changes depending on scaling and taskbars. The device pixel ratio may increase on the 4K display if Windows scaling is active, confirming everything is set up for sharp text.

Scenario 2: Ultrabook vs Gaming Monitor

A developer compares their 13.3-inch MacBook Air (2560x1600 Retina) to a 27-inch ASUS ROG Swift PG279Q (2560x1440). Entering the diagonal sizes, the tool shows much higher PPI on the MacBook, even though the pixel count is similar. The device pixel ratio is higher on the MacBook, highlighting why text looks crisper than on the gaming monitor.

Scenario 3: Phone with Notch

A user with an iPhone 13 (6.1-inch, 2532x1170) runs the tool in Safari. Safe area insets are reported, showing how much of the viewport is lost to the notch and rounded corners. The tool displays the orientation as portrait or landscape, depending on how the device is held.

Scenario 4: Multi-Browser Testing

A web designer opens the tool in Chrome, Firefox, and Edge on the same PC, all on a 24-inch Dell P2419H. They resize windows and adjust browser zoom. The tool shows how each browser may report slightly different viewport sizes due to UI differences and how zoom level affects layout. This helps ensure consistency across browsers.

Scenario 5: Dual OS Boot

A user dual-boots Windows and Linux on a desktop with an LG UltraGear 34GN850 (3440x1440, ultrawide). They run the tool in both OSes and see that Linux reports slightly different color depth and available area due to different graphics drivers. This helps pinpoint driver or OS configuration problems.

Scenario 6: Accessibility and Vision Testing

A teacher uses the tool to demonstrate how display scaling and DPI affect readability for students with vision impairments, using a Surface Pro 8 and a basic HP laptop. By tweaking OS scaling and browser zoom, the tool helps visualize the impact of each setting.

For best results, use the tool in the browser and OS you normally work with. Maximize the browser window to see the largest available viewport. If you use browser zoom or OS scaling, be aware that reported values may differ from the panel’s native specs. Enter the correct diagonal measurement for your display, measure with a tape if unsure, from one corner of the active screen to the opposite. Check manufacturer specs for reference: Dell, ASUS, LG, and Samsung publish exact diagonal sizes.

When testing laptops with hybrid graphics or docking stations, move the browser between all displays. Each may have different color depth, aspect ratio, or pixel density. For phones and tablets, run the tool in both portrait and landscape modes. If you notice discrepancies in reported values versus what the manufacturer claims, check your OS display settings, graphics driver options, and any virtual desktop software (like DisplayFusion or Windows Virtual Desktop).

Remember, browser-based tools can only access what the browser is allowed to see. Some metrics, like actual refresh rate or true hardware color gamut, require dedicated calibration tools (e.g., SpyderX Pro) or built-in monitor OSD menus.

Browser-based display tools are fast, safe, and platform-independent. They work on Windows, macOS, Linux, ChromeOS, Android, and iOS. You don’t need admin rights or extra downloads, just a modern browser. This makes them ideal for quick checks, cross-device comparisons, and troubleshooting on shared or locked-down systems.

Limitations exist. Browsers can’t access monitor firmware, EDID data, or proprietary color profiles. They estimate things like browser zoom and safe area using what the web platform provides. For pro-level calibration, color grading, or advanced diagnostics, use desktop software like DisplayCAL, CalMAN, or monitor OSD tools. These can read refresh rates, color gamuts, and fine-tune gamma curves. Gaming tools like NVIDIA Control Panel or AMD Radeon Software provide additional control over custom resolutions, refresh rates, and color depth.

Use browser tools for quick diagnostics, web development, or when you’re away from your main PC. For full calibration or hardware troubleshooting, dedicated apps and hardware sensors remain essential.

This browser-based display checker gives you instant, accurate measurements of your screen’s resolution, viewport, aspect ratio, and more. It’s valuable for anyone troubleshooting scaling, setting up new monitors, or debugging web layouts. With optional diagonal input, you can analyze PPI and physical dimensions for any device, from ultrabooks to ultrawides.

While browser tools can’t match the depth of desktop calibration software, they’re unmatched for speed, convenience, and cross-platform compatibility. Use this tool to confirm your settings, catch scaling issues, and compare devices like the MacBook Pro, Dell U2720Q, or Samsung Odyssey. For deep dives into color or refresh rate, pair it with dedicated apps.

Whether you’re a gamer, designer, or just curious about your display specs, this tool delivers clear, actionable info in seconds, no installs, no fuss.