Detect Your Screen Resolution & Display Size What Is My Screen Resolution tool for network operations.

The tool uses the `useState` and `useEffect` React hooks to manage its state and handle side effects, such as updating the screen resolution data when the window is resized. It also utilizes the `useCallback` hook to memoize functions like `updateData` and `handleCopy`, which helps prevent unnecessary re-renders. Under the hood, it employs browser APIs like `screen.width` and `screen.height` to fetch the current screen resolution, as well as `window.devicePixelRatio` to determine the device's pixel density. The `gcd` function calculates the greatest common divisor of two numbers, which is used to compute the aspect ratio of the screen.

When the tool updates its data, it uses the `updateData` function, which fetches the latest values from the browser APIs and recalculates derived properties like effective width and height. This process involves multiplying the CSS pixels by the device pixel ratio, resulting in physical pixels that can be used to select suitable image assets. The `formatOrientation` function is responsible for formatting the screen orientation string, replacing hyphens with spaces and capitalizing the first letter of each word. The tool also uses the `copyToClipboard` utility from the `@/lib/utils` module to copy the formatted screen resolution data to the clipboard when the user clicks the "Copy Screen Info" button.

The tool's UI is built using React components, which are rendered conditionally based on the availability of the screen resolution data. If no data is available, it displays a loading message; otherwise, it shows a detailed breakdown of the screen resolution, including CSS pixels, physical pixels, device pixel ratio, and aspect ratio. The viewport dimensions update live as the user resizes the window, indicated by a green dot next to the relevant fields. This live updating is achieved through the `window.addEventListener` method, which attaches an event listener to the window's resize event and calls the `updateData` function whenever the window size changes.