Device information

Get information about your current device (screen size, pixel-ratio, user agent, ...)

Enable JavaScript to use the interactive tool. The guide below explains how it works.

Device Information: Technical Specification & Debugging Guide

1. What the Tool Does

The Device Information tool is a comprehensive diagnostic utility that surfaces real-time metadata about a user's hardware, operating system, and browser environment. By querying various browser APIs (like Navigator, Screen, and Window), it provides a unified dashboard of the technical constraints and capabilities of the current device.

The tool categorizes information into two primary sections:

Screen: Details about the physical display, its orientation, pixel density, and the available viewport area.
Device/Browser: Information about the software environment, including vendor identification, language preferences, and the underlying platform architecture.

All data is retrieved client-side, providing an instantaneous snapshot of the environment without requiring any network requests or server-side analysis.

2. Why Someone Uses It

In modern web development, "it works on my machine" is a common but dangerous phrase. This tool is designed to bridge the gap between different environments.

Responsive Design Debugging

Web designers use this tool to see the exact "Window size" (viewport) as they resize their browser. This helps them identify the precise pixel width where a layout breaks, making it easier to write accurate CSS media queries.

Cross-Browser Testing

When a user reports a bug, developers need to know their "User Agent" and "Platform." This tool allows the user to simply screenshot or copy their device info to help the developer reproduce the issue in an identical environment.

High-DPI Assets Optimization

By checking the "Pixel ratio," developers can determine if a device has a "Retina" or high-DPI display. This informs decisions about whether to serve @2x or @3x image assets to ensure visual clarity without wasting bandwidth.

Privacy Awareness

For security-conscious users, this tool reveals exactly how much information a website can "see" about them. It serves as an educational resource regarding browser fingerprinting and the breadth of data exposed by standard web APIs.

3. Step-by-Step Instructions

Step 1: Open the Tool

Simply navigate to the Device Information page. The data is populated automatically the moment the page loads.

Step 2: Observe Real-Time Updates

Try resizing your browser window. You will notice the "Window size" values under the Screen section update dynamically as you drag the window edges.

Step 3: Check Device Orientation

If you are on a mobile device or a tablet, rotate the device from portrait to landscape. The "Orientation" and "Orientation angle" fields will update to reflect the new state.

Step 4: Extract Information

Review the Device section for your "User Agent." This long string is the most valuable piece of information for troubleshooting complex browser-specific bugs.

4. Examples

Typical Desktop Result

Screen Size: 1920 x 1080
Pixel Ratio: 1 dppx
Platform: Win32
Browser Vendor: Google Inc.

Typical Mobile (Retina) Result

Screen Size: 390 x 844
Pixel Ratio: 3 dppx
Platform: iPhone
Orientation: portrait-primary

5. Technical Deep Dive: Key Concepts

Screen Size vs. Window Size

Screen size refers to the physical resolution of the monitor or mobile display.
Window size (or Viewport) refers to the actual area where the website is rendered. This is always smaller than the screen size because it excludes browser toolbars, address bars, and OS taskbars. For developers, Window size is the more important metric.

Device Pixel Ratio (DPR)

The "Pixel ratio" (e.g., 2.0 or 3.0) explains how many physical pixels are used to represent a single "CSS pixel." A ratio of 2.0 means a 100x100 square in your code actually uses 200x200 physical pixels on the screen. High ratios are the reason why websites look sharp on modern smartphones but can look "blurry" on older monitors if images aren't optimized.

The User Agent String

The "User Agent" is a legacy string that browsers send to identify themselves. While it looks messy (e.g., Mozilla/5.0 (Windows NT 10.0; Win64; x64)...), it contains crucial clues about the browser engine (WebKit, Blink, or Gecko) and the operating system version.

6. Common Mistakes

Confusing Browser Vendor with Browser Name: The "Browser vendor" field often shows "Google Inc." even for browsers like Brave or Microsoft Edge, because they all use the underlying Chromium engine.
Ignoring Zoom Level: If you have zoomed in your browser (e.g., to 125%), the "Window size" and "Pixel ratio" will change. Always ensure your zoom is at 100% when using this tool for design debugging.
Privacy Over-Reliance: Assuming that "unknown" fields mean you are anonymous. Even if some fields are empty, other metadata can still be used for "fingerprinting."

7. Use Cases

Front-End Breakpoint Validation

Use the "Window size" to confirm that your max-width: 768px media query is triggering exactly where you expect it to.

Bug Reporting

When submitting a ticket for a web app, include the "Platform" and "User Agent" to help the engineering team rule out OS-specific bugs (like those often found in Safari on macOS).

Internationalization (i18n) Testing

Check the "Languages" field to see which language codes your browser is broadcasting. This is how websites decide whether to show you the English or Spanish version of their content.

Color Depth Verification

Designers working on high-fidelity graphics can check "Color depth" to ensure the user's display can actually render the millions of colors in their design without "banding."

8. Related Tools

Camera Recorder: Uses the device information to identify compatible hardware.
Benchmark Builder: Useful for comparing performance results across the different platforms identified here.
JSON Formatter: For parsing the raw User Agent string into a more readable format.

Technical Note: This tool utilizes the window.devicePixelRatio and navigator.userAgent properties. Note that some modern browsers are beginning to "freeze" the User Agent string to protect user privacy, so some version numbers might appear outdated even on the latest browser releases.

All tools

Ascii text drawer - Ascii text drawer - free online tool.

Base64 file converter - Convert a string, file, or image into its base64 representation.

Base64 string encoder/decoder - Simply encode and decode strings into their base64 representation.

Basic auth generator - Generate a base64 basic auth header from a username and password.

Bcrypt - Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.

Benchmark builder - Easily compare execution time of tasks with this very simple online benchmark builder.

BIP39 passphrase generator - Generate a BIP39 passphrase from an existing or random mnemonic, or get the mnemonic from the passphrase.

Camera recorder - Take a picture or record a video from your webcam or camera.

Case converter - Transform the case of a string and choose between different formats

Chmod calculator - Compute your chmod permissions and commands with this online chmod calculator.

Chronometer - Monitor the duration of a thing. Basically a chronometer with simple chronometer features.

Color converter - Convert color between the different formats (hex, rgb, hsl and css name)

Crontab generator - Validate and generate crontab and get the human-readable description of the cron schedule.

Date-time converter - Convert date and time into the various different formats

Device information - Get information about your current device (screen size, pixel-ratio, user agent, ...)

Docker run to Docker compose converter - Transforms "docker run" commands into docker-compose files!

Email normalizer - Email normalizer - free online tool.

Emoji picker - Copy and paste emojis easily and get the unicode and code points value of each emoji.

Encode/decode URL-formatted strings - Encode text to URL-encoded format (also known as "percent-encoded"), or decode from it.

Encrypt / decrypt text - Encrypt clear text and decrypt ciphertext using crypto algorithms like AES, TripleDES, Rabbit or RC4.

Escape HTML entities - Escape or unescape HTML entities (replace characters like <,>, &, " and \' with their HTML version)

ETA calculator - An ETA (Estimated Time of Arrival) calculator to determine the approximate end time of a task, for example, the end time and duration of a file download.

Git cheatsheet - Git is a decentralized version management software. With this cheatsheet, you will have quick access to the most common git commands.

Hash text - Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160

Hmac generator - Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function.

HTML WYSIWYG editor - Online, feature-rich WYSIWYG HTML editor which generates the source code of the content immediately.

HTTP status codes - The list of all HTTP status codes, their name, and their meaning.

IBAN validator and parser - Validate and parse IBAN numbers. Check if an IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.

Integer base converter - Convert a number between different bases (decimal, hexadecimal, binary, octal, base64, ...)

IPv4 address converter - Convert an IP address into decimal, binary, hexadecimal, or even an IPv6 representation of it.

IPv4 range expander - Given a start and an end IPv4 address, this tool calculates a valid IPv4 subnet along with its CIDR notation.

IPv4 subnet calculator - Parse your IPv4 CIDR blocks and get all the info you need about your subnet.

IPv6 ULA generator - Generate your own local, non-routable IP addresses for your network according to RFC4193.

JSON diff - Compare two JSON objects and get the differences between them.

JSON minify - Minify and compress your JSON by removing unnecessary whitespace.

JSON prettify and format - Prettify your JSON string into a friendly, human-readable format.

JSON to CSV - Convert JSON to CSV with automatic header detection.

JSON to TOML - Parse and convert JSON to TOML.

Json to xml - Json to xml - free online tool.

JSON to YAML converter - Simply convert JSON to YAML with this online live converter.

JWT parser - Parse and decode your JSON Web Token (jwt) and display its content.

Keycode info - Find the javascript keycode, code, location and modifiers of any pressed key.

List converter - This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row.

Lorem ipsum generator - Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content

MAC address generator - Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)

MAC address lookup - Find the vendor and manufacturer of a device by its MAC address.

Markdown to html - Markdown to html - free online tool.

Math evaluator - A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc.

MIME types - Convert MIME types to file extensions and vice-versa.

Numeronym generator - A numeronym is a word where a number is used to form an abbreviation. For example, "i18n" is a numeronym of "internationalization" where 18 stands for the number of letters between the first i and the last n in the word.

Open graph meta generator - Generate open-graph and socials HTML meta tags for your website.

OTP code generator - Generate and validate time-based OTP (one time password) for multi-factor authentication.

Password strength analyser - Discover the strength of your password with this client-side-only password strength analyser and crack time estimation tool.

PDF signature checker - Verify the signatures of a PDF file. A signed PDF file contains one or more signatures that may be used to determine whether the contents of the file have been altered since the file was signed.

Percentage calculator - Easily calculate percentages from a value to another value, or from a percentage to a value.

Phone parser and formatter - Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc.

QR Code generator - Generate and download a QR code for a URL (or just plain text), and customize the background and foreground colors.

Random port generator - Generate random port numbers outside of the range of "known" ports (0-1023).

Regex memo - Regex memo - free online tool.

Regex tester - Regex tester - free online tool.

Roman numeral converter - Convert Roman numerals to numbers and convert numbers to Roman numerals.

RSA key pair generator - Generate a new random RSA private and public pem certificate key pair.

Safelink decoder - Safelink decoder - free online tool.

Slugify string - Make a string url, filename and id safe.

SQL prettify and format - Format and prettify your SQL queries online (it supports various SQL dialects).

String obfuscator - Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content.

SVG placeholder generator - Generate svg images to use as a placeholder in your applications.

Temperature converter - Degrees temperature conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur, and Rømer.

Text diff - Compare two texts and see the differences between them.

Text statistics - Get information about a text, the number of characters, the number of words, its size in bytes, ...

Text to ASCII binary - Convert text to its ASCII binary representation and vice-versa.

Text to NATO alphabet - Transform text into the NATO phonetic alphabet for oral transmission.

Text to Unicode - Parse and convert text to unicode and vice-versa

Token generator - Generate random string with the chars you want, uppercase or lowercase letters, numbers and/or symbols.

TOML to JSON - Parse and convert TOML to JSON.

TOML to YAML - Parse and convert TOML to YAML.

ULID generator - Generate random Universally Unique Lexicographically Sortable Identifier (ULID).

URL parser - Parse a URL into its separate constituent parts (protocol, origin, params, port, username-password, ...)

User-agent parser - Detect and parse Browser, Engine, OS, CPU, and Device type/model from an user-agent string.

UUIDs generator - A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).

WiFi QR Code generator - Generate and download QR codes for quick connections to WiFi networks.

XML formatter - Prettify your XML string into a friendly, human-readable format.

Xml to json - Xml to json - free online tool.

YAML prettify and format - Prettify your YAML string into a friendly, human-readable format.

YAML to JSON converter - Simply convert YAML to JSON with this online live converter.

YAML to TOML - Parse and convert YAML to TOML.

Guides and articles

10 Essential Productivity Tools Every Modern Developer Needs in 2026 - Optimize your workflow with our top 10 picks for essential, privacy-focused developer utilities.

Mastering Web Security: A Developer's Guide to Bcrypt, JWT, and OTP - Learn how to protect user data using industry-standard hashing, authentication, and 2FA techniques.

The Art of Clean Data: Mastering JSON, XML, and SQL Formatting - Best practices for handling the most common data formats in web development to improve readability and debugging.

Navigating the Network: A Deep Dive into IP Subnetting and MAC Addresses - Understand the core concepts of networking, from CIDR notation to MAC address OUI lookups.

Frontend Excellence: Leveraging SVG and Color Tools for Perfect UI - Advanced techniques for using SVGs, color spaces, and content placeholders to build polished interfaces.

Mastering UUIDs: A Comprehensive Guide to Globally Unique Identifiers - Everything you need to know about UUID versions, use cases, and best practices for unique identification.

The Ultimate Guide to QR Codes: How to Create and Use Them Effectively - Learn how QR codes work, their common use cases, and how to create high-quality codes for your needs.

Understanding Base64: How to Encode Files and Images for the Web - A deep dive into Base64 encoding, its use cases in web development, and how to convert files easily.

Mastering Cron Jobs: A Guide to Scheduling Tasks with Crontab - Demystifying crontab syntax and learning how to automate server tasks with cron jobs.

Understanding Linux Permissions: A Guide to Chmod and File Security - Master file permissions in Linux and learn how to use chmod to secure your system.

Security Deep Dive: Mastering JWT, Bcrypt, and OTP for Secure Applications - Learn how to implement robust security in your applications using JWT parsing, Bcrypt hashing, and OTP generation.

The Architect's Guide to Data Transformation: JSON, YAML, TOML, and XML - A comprehensive guide to converting and formatting various data structures for modern web development.

Networking Essentials: Understanding IP Subnetting, MAC Addresses, and URL Parsing - Master the core concepts of networking tools, from subnet calculations to MAC address lookups.

Boosting Developer Productivity with Docker, Git, and Regex Tools - Optimize your workflow with essential tools for Docker configuration, Git management, and Regex testing.

Typography and Content: From ASCII Art to Text Statistics and Lorem Ipsum - Exploring the creative and analytical sides of text management in web design.

Mathematical Precision in Web Development: Math Evaluators and Unit Converters - How to handle complex calculations and unit conversions accurately in your web projects.

SEO and Meta Tags: How to Optimize Your Web Presence Automatically - Practical tips for using meta tag generators and slugify tools to improve your search engine rankings.

The Anatomy of a Perfect Password: Strength Analysis and Key Generation - Everything you need to know about creating and validating secure passwords and cryptographic keys.

Modern Web Standards: HTTP Status Codes, MIME Types, and User Agents - A deep dive into the fundamental standards that power the modern web.

Global Finance and Communication: IBAN Validation and Phone Formatting - Handling international data formats for banking and telecommunications with ease.

Frontend Utility Masterclass: From SVG Placeholders to Camera Recording - Advanced frontend techniques for dynamic UI components and media handling.

Modern Encryption Standards for Developers: A Comprehensive Guide to Data Security - In an era of escalating data breaches and sophisticated adversarial attacks, encryption is no longer a "nice-to-have" feature—it is a fundamental requirement of…

Containerization Strategies: Docker Best Practices for Production - Docker has fundamentally changed how we package and deploy applications. However, there is a massive gap between a "working Dockerfile" and a "production-ready image."…

Infrastructure as Code (IaC) Fundamentals: Terraform vs. Ansible - The days of manually configuring servers via SSH and a series of "hope-it-works" bash scripts are over. In modern cloud engineering, the infrastructure is the code.…

JWT Security: Common Pitfalls and Best Practices - JSON Web Tokens (JWT) have become the industry standard for stateless authentication and authorization. By encapsulating claims in a cryptographically signed token, JWTs…

Mastering CSS Grid and Flexbox for Complex Layouts - For years, web developers struggled with floats and table-based layouts to create multi-column designs. The introduction of Flexbox and CSS Grid revolutionized how we…

Mastering JSON: Efficient Data Management in Web Apps - In the modern web ecosystem, data is the lifeblood of every application. Whether you are building a lightweight React component or a complex microservices architecture,…

Modern Frontend Performance Optimization: Beyond the Basics - In the current era of "heavy" web applications, performance is no longer just about minimizing the number of HTTP requests or compressing images. It is about Perceived…

Monitoring and Observability: Setting up a Health Dashboard - In a complex system, "it\

The Definitive Guide to Password Hashing - In the modern landscape of cybersecurity, the question is not if a database will be breached, but when. When an attacker gains access to a user table, the only line of…

Implementing a Robust CI/CD Pipeline for Modern Web Apps - Continuous Integration (CI) and Continuous Deployment (CD) are often spoken of as a single entity, but they represent two distinct phases of the software delivery…

The Evolution of State Management in Vue 3: From Vuex to Pinia - State management is the heart of any complex frontend application. It is the mechanism that ensures data remains consistent as a user navigates through different views,…