# What Is My Browser - Comprehensive Documentation

> A fast, privacy-focused online diagnostic utility that inspects and reports your browser version, operating system, IP address, device hardware, screen resolution, viewport dimensions, and HTTP request headers.

## Overview & Capabilities

What Is My Browser (hosted at https://whatismybrowser.app) is designed to help end users, software engineers, QA specialists, and IT administrators quickly identify their current browsing environment. It combines server-side analysis (via Angular SSR and Express) with client-side JavaScript APIs (Screen API, Navigator API, Window API) to present an exhaustive, structured view of your device and network configuration.

### Detected Information

1. **Browser Information**
   - **Browser Family**: The name of the browser (e.g., Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, Brave).
   - **Major & Minor Version**: Exact release version parsed from the User-Agent header and Client Hints.
   - **Language**: Preferred language as specified in `Accept-Language` headers and `navigator.language`.
   - **Rendering Engine**: Underlying layout engine (e.g., Blink, Gecko, WebKit).
   - **Cookies & JavaScript Status**: Confirms whether cookies and JavaScript are enabled and functional.

2. **Network & IP Address**
   - **Remote IP Address**: Public IPv4 or IPv6 address as seen by the server (resolving reverse proxy headers such as `X-Forwarded-For` and `X-Real-IP`).
   - **Protocol**: HTTP/1.1, HTTP/2, or HTTP/3 depending on the client connection.

3. **Screen & Viewport Dimensions**
   - **Physical Screen Resolution**: Total screen dimensions adjusted for device pixel ratio (`screen.width * window.devicePixelRatio` × `screen.height * window.devicePixelRatio`).
   - **Available Screen Resolution**: Usable screen area excluding system taskbars/docks (`screen.availWidth` × `screen.availHeight`).
   - **Browser Window Resolution / Viewport**: CSS viewport dimensions available for webpage layout (`window.innerWidth` × `window.innerHeight`).
   - **Device Pixel Ratio (DPR)**: Ratio of physical pixels to CSS pixels (indicates Retina / HiDPI displays).
   - **Screen Orientation**: Portrait or Landscape orientation.

4. **Device & Hardware Information**
   - **Brand / Vendor**: Device manufacturer (e.g., Apple, Samsung, Google).
   - **Model & Family**: Hardware model or category (Desktop, Mobile, Tablet).
   - **CPU Cores**: Logical processor count via `navigator.hardwareConcurrency`.
   - **Device Memory**: Approximate RAM in gigabytes via `navigator.deviceMemory` (where supported).
   - **Touch Support**: Number of simultaneous touch points via `navigator.maxTouchPoints`.

5. **Operating System**
   - **OS Name**: Operating system name (e.g., macOS, Windows, Linux, iOS, Android).
   - **Version & Patch**: OS release numbers and update revisions.

6. **Raw User Agent & HTTP Request Headers**
   - Full raw User-Agent string sent with the HTTP request.
   - Complete list of HTTP headers sent by the client, including `Accept`, `Accept-Encoding`, `Accept-Language`, `User-Agent`, `Sec-Ch-Ua`, and more.

---

## Frequently Asked Questions

### What is a web browser?
A web browser is an application software used to access and view websites on the World Wide Web. Browsers retrieve content such as HTML, CSS, JavaScript, images, and media from web servers, render it into visual interactive web pages, and allow navigation via hyperlinks. Common web browsers include Google Chrome, Apple Safari, Mozilla Firefox, and Microsoft Edge.

### What is a User-Agent header?
When your browser requests a web page from a server, it includes an HTTP header called `User-Agent`. This string identifies the browser application type, its version number, the rendering engine, and the host operating system. Web servers use this information to serve optimized content, detect mobile devices, or diagnose compatibility problems.

### What is the difference between screen resolution and browser viewport?
- **Screen resolution** refers to the total number of physical pixels displayed by your monitor or mobile screen.
- **Browser viewport** (window resolution) is the actual rectangular visible area of the web page inside the browser window. The viewport is typically smaller than the screen resolution because of browser window borders, tabs, address bars, bookmarks, and developer tools.

### What is Device Pixel Ratio (DPR)?
Device Pixel Ratio (DPR) is the ratio between physical display pixels and logical CSS pixels. On standard displays, 1 CSS pixel corresponds to 1 physical pixel (DPR = 1). On modern high-density screens (like Apple Retina displays or 4K monitors), DPR is typically 2, 3, or fractional, meaning multiple physical hardware pixels render a single CSS pixel for sharper text and graphics.

### What is an IP address?
An Internet Protocol (IP) address is a unique numerical identifier assigned to every device connected to a computer network that uses the Internet Protocol for communication. Your public IP address allows web servers to send response packets back to your computer.

### How does What Is My Browser protect your privacy?
- All diagnostics are rendered dynamically in real-time.
- No personal data, IP addresses, browsing histories, or hardware fingerprints are saved to a database or tracked across sessions.
- No third-party tracking scripts or surveillance pixels are loaded.

---

## Technical Architecture

- **Framework**: Angular 22 with standalone components and hybrid SSR rendering (`@angular/ssr`).
- **Runtime**: Bun 1.4+ execution environment.
- **Styling**: Angular Material 3 with responsive layout and dynamic light/dark theming via CSS custom properties and color-scheme.
- **Deployment**: Nomad containerized cluster with Traefik reverse proxy and Let's Encrypt TLS termination.
- **Health Endpoints**: `/health`, `/api/health`, `/healthz` returning JSON status for orchestration probes.