Console Script to Gather Display Information

JS
S
JavaScript

It gathers information on screen dimensions, browser viewport size, and the device's pixel ratio, which is crucial for understanding how things are rendered on high-DPI (or "Retina") displays.

1(function() {
2  // An object to hold all the display information.
3  const displayInfo = {
4    // --- Screen Information ---
5    // The total width and height of the user's screen. [16, 17, 18]
6    screen: {
7      width: window.screen.width,
8      height: window.screen.height,
9      // The available width and height of the screen, excluding system elements like the taskbar. [2]
10      available_width: window.screen.availWidth,
11      available_height: window.screen.availHeight,
12    },
13    // --- Browser Window (Viewport) Information ---
14    // The width and height of the browser's viewport, including scrollbars. [1, 5, 12]
15    window: {
16      inner_width: window.innerWidth,
17      inner_height: window.innerHeight,
18      // The width and height of the entire browser window, including toolbars and sidebars. [2, 7]
19      outer_width: window.outerWidth,
20      outer_height: window.outerHeight,
21    },
22    // --- Document Element Information ---
23    // The width and height of the viewport, excluding scrollbars. [7, 8, 14]
24    document_element: {
25      client_width: document.documentElement.clientWidth,
26      client_height: document.documentElement.clientHeight,
27    },
28    // --- Device Pixel Ratio ---
29    // The ratio of physical pixels to CSS pixels. Crucial for high-DPI screens. [3, 6, 13]
30    device_pixel_ratio: window.devicePixelRatio || 1,
31    // --- Calculated Native Resolution ---
32    // An estimation of the device's native screen resolution. [6, 19]
33    calculated_native_resolution: {
34      width: window.screen.width * (window.devicePixelRatio || 1),
35      height: window.screen.height * (window.devicePixelRatio || 1),
36    },
37    // --- User Agent ---
38    // Information about the user's browser and operating system.
39    user_agent: navigator.userAgent,
40  };
41
42  // Log the collected information to the console.
43  console.log("--- Customer Display Information ---");
44  console.log(displayInfo);
45 console.log("--- Please right click on the printed line and select 'Copy Object' or just copy and paste all the information above. ---");
46})();

Created on 6/10/2025