"Nothing is magic."
Every detail we see on websites is a result of specific information exchanged between our devices and servers. Here's how websites like deviceinfo.me gather and display device-specific details:
1.Device Type Detection
When you visit a website, the User-Agent string is sent as part of the HTTP headers. This string contains information about your operating system (e.g., Windows, macOS, iOS, Android) and browser type.
- Why is this needed?
Websites often adapt their layouts or features based on the device type. For example:
- Windows Desktops might get a full-featured layout.
Mobile Phones may receive simplified designs for smaller screens.
macOS Devices may have tailored styles to align with macOS aesthetics.
- Battery Status Information
Modern browsers provide the Battery Status API, which can retrieve details such as:
- Battery level (percentage).
- Charging status (charging or discharging).
Websites like deviceinfo.me can use this API to display your battery details.(Browser triggers an API request to OS framework , then OS will serve this request) This does not require sending your battery details to the server(deviceinfo); instead, the browser directly fetches and shows this information.
- Performance Metrics
Performance metrics such as DNS time, TCP connection time, server response time, and page download time are calculated using the Navigation Timing API. This API tracks the various phases of page loading and provides precise timestamps for:
- DNS Lookup Time: Resolving the domain to an IP.
- TCP Connection Time: Establishing a secure connection.
- Server Response Time: Waiting for the server's first response.
- Page Download Time: Fetching all content of the page.
- Other Details
Websites like deviceinfo.me also gather details such as screen resolution, IP address, browser version, and more using a combination of:
- Browser APIs.
- Server-side tools.
You can verify this by opening Developer Tools (F12) → Network Tab → Reload the page and observe all the requests being sent. Each request reveals what data is being sent and fetched.