Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
81
rated 0 times [  84] [ 3]  / answers: 1 / hits: 5653  / 3 Years ago, sun, december 27, 2020, 12:00:00

I just wonder whether there exists a way to get screen real size(screen resolution) in js.



  1. I know the screen API, but its result not what I wanted.


screen;
// Screen {availWidth: 1680, availHeight: 973, width: 1680, height: 1050, colorDepth: 30, …}

screen.width;
// 1680

screen.height;
// 1050


which, I got width: 1680, height: 1050;


actually, the screen size is 2880 x 1800;



my screenshots



enter


enter


So, anyone can help?




update for Apple Retina Screen Bug Reason ⚠️



Apple Retina Screen default auto scale to 1680px x 1050px



As you can't get the real retina screen size scale ratio, so the result will not be 2880px x 1800px;


But the below solution is also right, as it read screen size is 1680px x 1050px, thefore result is 3360px x 2100px;


(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)



enter



refs



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


https://en.wikipedia.org/wiki/Dots_per_inch


https://en.wikipedia.org/wiki/Display_resolution


More From » screen

 Answers
9

Screen Resolution ≠ Window width

most os changing screen dpi so screen.width mostly return screen size with os dpi for for example my screen resolution is 1920x1080 and windows defult dpi is 125 so js screen.width return 1600px


use this:


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}`);
}

// test
getResolution();
// Your screen resolution is: 3840 x 2160


enter


[#2053] Monday, December 21, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
hailie

Total Points: 25
Total Questions: 112
Total Answers: 111

Location: Belize
Member since Tue, Dec 8, 2020
4 Years ago
hailie questions
;