Notification
Go to Home All Tools
Compare Glossary Blog Contact

Screen Resolution Checker

Check your screen resolution, viewport size, device pixel ratio, and color depth instantly, right in your browser.

Active Viewport Detecting... CSS logical pixels
Screen Resolution Detecting... Physical hardware pixels
Device Pixel Ratio Detecting... DPR scale factor

Screen Coordinates

Screen Width -
Screen Height -
Available Width -
Available Height -
Viewport Width -
Viewport Height -
Browser Window Outer Width -
Browser Window Outer Height -
Device Orientation -
Color Depth -

Responsive Breakpoints

Mobile / Extra Small (xs) < 640px
-
Small Tablet (sm) 640px - 768px
-
Medium Tablet (md) 768px - 1024px
-
Laptop / Desktop (lg) 1024px - 1280px
-
Large Desktop (xl) 1280px - 1536px
-
Ultra-wide Screen (2xl) >= 1536px
-
Knowledge Hub

Deep Dive: Screen Resolutions & Breakpoints

Logical vs. Physical Pixels

Web display sizes are parsed in two distinct pixel layouts:

  • Physical Pixels: The actual hardware tiny LEDs present on your physical screen. A standard 1080p monitor has 1920x1080 physical pixels.
  • Logical Pixels (CSS): The virtual coordinate grid used by browsers to render layout elements. This keeps content at a legible size. On standard screens, logical and physical pixels are identical.
  • Device Pixel Ratio (DPR): The multiplier that maps physical pixels to logical pixels. High-density screens (like Apple Retina or modern smartphone screens) use a DPR of 2.0 or 3.0, mapping 4 or 9 physical pixels to render a single crisp logical CSS pixel.

Designing for Breakpoints

CSS framework utilities structure layout layouts according to specific breakpoints. This allows components to scale or stack gracefully depending on screen size. Here are the typical framework standards:

  • Mobile-First Design: Designing for small screens first, then using media queries to expand columns, navigation bars, and margins as viewport sizes scale upwards.
  • Fluid Grid Systems: Using percentages, CSS Grid, and Flexbox rather than hardcoded pixel dimensions to ensure containers flow naturally into the active viewport bounds.
  • Testing Layouts: Quality engineers resize windows or use simulator tools to verify that media query breakpoints adapt without broken borders, overflow lines, or overlapping elements.
Education

Understanding Pixels, DPR, and Breakpoints

01

Physical Pixels vs Logical CSS Pixels

Physical pixels are the actual hardware pixels on a display, for example 3840x2160 on a 4K monitor, while logical (CSS) pixels are the virtual coordinate grid a browser uses to lay out content so text and elements stay a legible size. On a standard-density screen these two numbers are identical, but on high-density displays a single logical pixel is rendered using multiple physical pixels.

02

What Device Pixel Ratio Represents

Device Pixel Ratio (DPR) is the multiplier connecting physical pixels to logical pixels; a DPR of 2.0, common on Retina displays and many modern phones, means a 100px wide element is actually rendered using 200 physical pixels, and a DPR of 3.0 uses 300. This is why the same CSS layout looks sharper on a high-DPR phone screen than on an older 1x monitor of a similar logical size.

03

Why Viewport Changes as You Resize

Viewport width and height represent the visible canvas inside the browser window where a page renders, so resizing the window, opening developer tools, or rotating a mobile device all change the viewport immediately while the physical screen resolution stays fixed. This tool tracks both numbers live so the difference between the two is easy to see in real time.

04

Standard Responsive Breakpoints

Common CSS frameworks define breakpoints so layouts can rearrange at set widths: roughly under 640px for mobile, 640 to 768px for small tablets, 768 to 1024px for medium tablets, 1024 to 1280px for laptops and desktops, and 1536px and above for ultra-wide screens. Checking which breakpoint the current viewport falls into helps confirm a responsive layout is targeting the right range before shipping it. Pair this tool with the Browser Info page for a fuller client environment report.

Good to know

Questions, answered

Quick answers about how this tool works.

Physical resolution is the total number of hardware pixels on the screen (e.g. 3840x2160 on a 4K display). CSS resolution (viewport size) is the number of logical pixels used by the browser to scale content (e.g. 1920x1080). High-DPI screens use multiple physical pixels to render one logical CSS pixel for sharper text and graphics.

Device Pixel Ratio is the ratio between physical hardware pixels and logical CSS pixels. A Retina display or high-density mobile screen typically has a DPR of 2.0 or 3.0, meaning a 100px wide box occupies 200 or 300 physical hardware pixels.

Viewport size represents the canvas size inside the browser window where the page is visible. Resizing your browser window, opening developer tools, or toggling mobile device simulation immediately updates the viewport dimensions.

Standard responsive frameworks define breakpoints to rearrange layouts: Mobile/Extra Small (<640px), Small/Tablet (640px - 768px), Medium/Large Tablet (768px - 1024px), Desktop (1024px - 1280px), Large Desktop (1280px - 1536px), and Ultra-wide (>=1536px).

It evaluates the width and height of the viewport: if the width is greater than or equal to the height, the orientation is "Landscape"; otherwise, it is "Portrait". On mobile devices, it also listens to orientation change events.

Guides

Related guides

Plain-language explainers that sit next to this tool.

Recommended for Your Workflow

Swipe
Utility Tools

QR Code Generator

Create custom QR codes with your own logo, colors, and design, then download them in high resolution for print or web.

Use Tool
Utility Tools

Internet Speed Test

Test your internet speed instantly, checking download and upload rates, ping, jitter, and connection quality for streaming, gaming, or work.

Use Tool
Utility Tools

Browser Information Tool

See detailed information about your browser, operating system, screen size, device type, and network connection in one glance.

Use Tool

More from Utility Tools

Swipe
Popular

Barcode Generator

Create custom barcodes in formats like Code 128, EAN-13, and UPC-A, with adjustable size, colors, and labels for retail or print.

Try Tool
Popular

UUID Generator

Generate RFC-compliant UUIDs (v1, v4, v5, v7) instantly, with bulk generation, custom formatting, and export to TXT, CSV, or JSON.

Try Tool
Popular

IP Address Lookup

Look up any IPv4 or IPv6 address, or your own, to see its location, city, ISP, timezone, and ASN on an interactive map.

Try Tool
Popular

User Agent Parser

Parse any browser user agent string to reveal the browser, OS, rendering engine, device type, and bot detection results.

Try Tool

Popular Tools on EasyToolio

Swipe
Finance

SIP Calculator

Calculate how your monthly SIP investments grow over time with compounding, and estimate your mutual fund SIP returns instantly.

Try Tool
Finance

Salary Calculator

Convert your salary between hourly, daily, monthly, and annual pay instantly, accounting for working days, holidays, and unpaid leave.

Try Tool
Finance

Compound Interest Calculator

Calculate compound interest on your investment with initial capital, recurring contributions, and your chosen compounding frequency.

Try Tool
Finance

GST Calculator

Add or remove GST from any price instantly by entering the amount and the applicable GST rate percentage.

Try Tool

What do you need to work out next?

Search 190+ free tools by name, or pick a category below. Every one runs instantly in your browser — no signup, nothing to install.

More Utility Tools
Browse by category All 18 categories
Finance 40 Health & Wellness 26 Unit Converters 19 Developer Tools 15 Real Estate 14 Mathematics & Education 13 Astrology 12 Date & Time 8 Text Tools 6