UtilToolkits
Request a Tool
Home
AI Tools
Text Tools
Image Tools
CSS Tools
Coding Tools
Color Tools
Calculator Tools
Productivity Tools
Fun Tools
Video Tools
Other Tools
BlogAI Content Detector
CodeCast
Play CodeType CodeCode to Image

Your Favorites

Sign in to view your favorites

Tool Categories

Browse by category
AI (10)Text (14)Image (14)CSS (9)Coding (23)Color (4)Calculator (9)Productivity (8)Fun (4)Video (7)Other (2)All tools β†’Blog β†’
UtilToolkits
Β© 2026 UtilToolkits. All Rights Reserved.
AboutContactPrivacyTerms

More Productivity tools

See all Productivity tools β†’
  • UTM Builder

    Build tracking URLs for marketing campaigns.

  • Device Resolution List

    Reference guide for common device screen sizes.

  • Time Zone Converter

    Instantly convert any date and time between global time zones with precise, real-time accuracy.

  • To-Do List

    A simple to-do list that saves your tasks in the browser.

  • Pomodoro Timer

    A timer to help you focus using the Pomodoro Technique.

  • World Clock

    Check the time in different cities around the world.

Quick Tip: Coding

Ever wondered what's inside a JWT? You can decode the header and payload to see the claims, which is super helpful for debugging authentication.

  1. Home
  2. Tools
  3. Screen Resolution Info

About this Tool

Know your viewport. Get detailed specs about your current screen resolution, window size, and pixel density. A must-have for testing responsive designs.

Designers often guess what 'mobile' or 'desktop' size means. This tool gives you the hard numbers for your specific device, helping you identify exactly which CSS media query is active.

  1. Open the page.
  2. Instantly see your screen width, height, and color depth.
  3. Resize your browser to see the 'Viewport' values update live.
  • Checking your current viewport size for CSS breakpoints.
  • Verifying if a screen is HiDPI/Retina.
  • Debugging layout issues on specific devices.
  • Live Updates: Resizing updates the numbers instantly.
  • Pixel Ratio: See if you're on a Retina/HiDPI display.
  • Color Depth: Check color support.
  • Copy Specs: One-click copy for bug reports.

It reads `window.innerWidth`/`Height` for the viewport and `window.screen.width`/`Height` for the physical display. It also checks `window.devicePixelRatio`.

Why are viewport and screen size different?

Screen size is your physical monitor. Viewport is just the area of the web page (excluding browser bars). Responsive design cares about viewport.

What is pixel ratio?

Modern screens pack more pixels into the same space for sharpness. A ratio of 2 means there are 2 physical pixels for every 1 CSS pixel.

Does it track me?

No, this information is just read from your browser to show you. it is not recorded.

All calculations and data processing for this tool are performed locally in your browser. UtilToolkits does not send any of your data to an external server, ensuring your information remains private and secure.

Credits:Next.jsβ€’Reactβ€’Tailwind CSSβ€’Lucide Icons

Screen Resolution Info

Detecting your screen…