Skip to content

Instantly share code, notes, and snippets.

@jadsongmatos
Last active March 20, 2023 03:05
Show Gist options
  • Save jadsongmatos/3cd2674055e3f76d6ef025a06337d8d9 to your computer and use it in GitHub Desktop.
Save jadsongmatos/3cd2674055e3f76d6ef025a06337d8d9 to your computer and use it in GitHub Desktop.
// https://webbrowsertools.com/screen-size
class Screen {
constructor() {
ratio: 8;
}
gcd(a, b) {
return 0 === b ? a : this.gcd(b, a % b);
}
prefix() {
if (window.matchMedia)
for (
var prefixes =
"-webkit-min- min--moz- -o-min- -ms-min- -khtml-min- ".split(" "),
i = 0;
i < prefixes.length;
i++
)
if (
window.matchMedia("(" + prefixes[i] + "device-pixel-ratio:1.0)")
.matches
)
return prefixes[i];
}
dppx() {
if (window.matchMedia) {
for (
var i = 1, maxdppx = 1;
i <= this.ratio &&
!1 !==
window.matchMedia("(min-resolution:" + i.toFixed(1) + "dppx)")
.matches;
i = parseFloat((i + 0.1).toFixed(1))
)
maxdppx = i;
return maxdppx;
}
}
devicePixelRatio() {
if (this.prefix) {
for (
var i = 1, maxdpr = 1;
i <= this.ratio &&
!1 !==
window.matchMedia(
"(" + this.prefix + "device-pixel-ratio:" + i.toFixed(1) + ")"
).matches;
i = parseFloat((i + 0.1).toFixed(1))
)
maxdpr = i;
return maxdpr;
}
}
load() {
const ratio = this.gcd(window.screen.width, window.screen.height);
return {
windowScreen: window.screen,
windowNavigator: window.navigator,
width: window.screen.width,
height: window.screen.height,
availWidth: window.screen.availWidth,
colorDepth: window.screen.colorDepth,
pixelDepth: window.screen.pixelDepth,
availHeight: window.screen.availHeight,
availTop: window.screen.availTop,
availLeft: window.screen.availLeft,
devicePixelRatio: window.devicePixelRatio,
aspectRatio:
window.screen.width / ratio + ":" + window.screen.height / ratio,
orientationType: window.screen.orientation.type,
orientationType2: window.screen.orientation.type.split("-")[0],
maxTouchPoints: window.navigator.maxTouchPoints,
angle: window.screen.orientation.angle,
resolution:
Math.round(
window.screen.width * parseFloat(window.devicePixelRatio.toFixed(1))
) +
" ⨯ " +
Math.round(
window.screen.height * parseFloat(window.devicePixelRatio.toFixed(1))
),
innerWidth: window.innerWidth,
outerWidth: window.outerWidth,
innerHeight: window.innerHeight,
outerHeight: window.outerHeight,
bodyClientWidth: document.body.clientWidth,
bodyCientHeight: document.body.clientHeight,
bodyClientTop: document.body.clientTop,
bodyClientLeft: document.body.clientLeft,
clientWidth: document.documentElement.clientWidth,
clientHeight: document.documentElement.clientHeight,
clientTop: document.documentElement.clientTop,
clientLeft: document.documentElement.clientLeft,
viewportWidth: Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
),
viewportHeight: Math.max(
document.documentElement.clientHeight || 0,
window.innerHeight || 0
),
detectorPrefix: this.prefix(),
detectorDPI: Math.round(96 * this.dppx()),
detectorDPRDetected: this.devicePixelRatio(),
detectorDppx: Math.round(parseFloat(this.dppx().toFixed(1))),
zoomLevel: Math.round(
100 * parseFloat(window.devicePixelRatio.toFixed(1))
),
detectorDPRWindow: parseFloat(window.devicePixelRatio.toFixed(1)),
};
}
}
@jadsongmatos
Copy link
Author

This JavaScript code defines a class called Screen that gathers various information about a user's device screen, including dimensions, resolution, pixel ratio, and other related properties. The class contains a constructor and several methods to obtain these properties. Here's a brief overview of each method:

  1. constructor(): Initializes a Screen object with a ratio property set to 8.
  2. gcd(a, b): Calculates the greatest common divisor (GCD) of two given numbers using the Euclidean algorithm.
  3. prefix(): Detects and returns the prefix for device pixel ratio media queries supported by the browser.
  4. dppx(): Determines the maximum device pixel ratio in dppx (dots per px) supported by the browser.
  5. devicePixelRatio(): Determines the maximum device pixel ratio in the format supported by the browser.
  6. load(): Gathers various properties related to the user's device screen and returns them as an object. Some of these properties include screen dimensions, orientation, color depth, pixel depth, viewport dimensions, and zoom level.

To use the Screen class, you can create a new instance of the class and call its load() method. This will return an object with the screen properties:

const screenInfo = new Screen();
const screenProperties = screenInfo.load();
console.log(screenProperties);

This will log an object containing the screen properties to the console.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment