How to use js to detect the resolution of the screen All In One

How to use js to detect the resolution of the screen All In One

如何使用 js 检测屏幕的分辨率

如何获取真实的屏幕分辨率大小

devicePixelRatio / 设备像素比 (屏幕纵横比)

(function getResolution() {
  const realWidth = window.screen.width * window.devicePixelRatio;
  const realHeight = window.screen.height * window.devicePixelRatio;
  console.log(`
    Your screen resolution is: ${realWidth} x ${realHeight}
    Your screen devicePixelRatio is: ${window.devicePixelRatio}
    Your screen width is: ${window.screen.width}
    Your screen height is: ${window.screen.height}
  `);
})();
// Your screen resolution is: 3840 x 2160 (4K)
// Your screen resolution is:  3360 x 2100 ( 3K? Retina Screen)
// Your screen resolution is: 1920 x 1080 ( 1080P / FHD)

• 1080P
• 2K
• 4K

solutions

class screenChecker {
    constructor() {
        this.screen = window.screen;
        this.fullscreen = false;
        this.screenSize = {
            width: 0,
            height: 0,
        };
        this.init();
    }
    getScreenSize() {
        const {
            height,
            width,
        } = this.screen;
        return {
            width,
            height,
        };
    }
    isFullScreen() {
        // 全屏判断逻辑，可用的屏幕大小等于实际的屏幕大小, 浏览器地址栏高度为 0
        // availLeft, availTop, 👎 不推荐使用
        const {
            availHeight,
            availWidth,
            height,
            width,
        } = this.screen;
        this.fullscreen = (availHeight === height && availWidth === width);
        return this.fullscreen;
    }
    getDepth() {
        const {
            colorDepth,
            pixelDepth,
        } = this.screen;
        return {
            colorDepth,
            pixelDepth,
        };
    }
    isScreenResized() {
        // TODO: 屏幕缩放检测
        return false;
    }
    getOrientation() {
        // 屏幕方向，判断屏幕是否旋转
        const {
            orientation: {
                angle,
                type,
                // onchange,
            },
        } = this.screen;
        return {
            angle,
            type,
        };
    }
    init() {
        this.getScreenSize();
        this.isFullScreen();
    }
}

export default screenChecker;

demos

js 检测屏幕分辨率

import screenChecker from "./screen-checker.ts"

const screen = new screenChecker();

console.log(`🖥️ screen =`, screen)

refs

Apple MBP Retina Screen 屏幕分辨率 All In One

https://www.cnblogs.com/xgqfrms/p/14196834.html

https://stackoverflow.com/questions/65462643/how-to-get-the-real-screen-sizescreen-resolution-by-using-js

https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---