Detect screen resolution independently of page zoom level and Windows scale settings

windows 10 display scaling multiple monitors
relation between zooming and pixel width
windows 10 resolution scaling problem
how to handle browser zoom in css
javascript get dpi
windows 10 scaling below 100
how to adjust screen size on second monitor

I need to detect screen resolution. The problem is, if scale setting in Windows 10 is not 100%, it affects screen.width / screen.height values.

I could use pixelDeviceRatio for correct them, but here is another problem: if the page is zoomed, it also affects pixelDeviceRatio.

For example, I have Windows scale setting is 150%, and page zoom is 67%. My screen resolution is 1920x1080. In this case, screen.width is 1280, and pixelDeviceRatio is 1.0 (because Windows scale and page zoom level compensate each other). How can I detect the real screen resolution?

Upd.: I'm working on HTML5 game. I need to resize it to actual screen resolution when going to fullscreen mode.

Upd. 2: I have <canvas> element and call its requestFullscreen method to switch into fullscreen mode. Then I have to set width and height of the canvas. If I set it, for example, less than actual screen resolution (1280 instead of 1920), empty margins around the canvas appears.

How to set custom display scaling settings on Windows 10 , How do I get my display to fit my screen? Adjust display settings Windows 10 Select Display > Change the size of text, apps, and other items, and then adjust the slider for each monitor. Earlier Windows systems Right-click the application, select Properties, select the Compatibility tab, and then select the Disable display scaling on high DPI settings check box. Change application properties

currently there is no javascript api to detect os scale factor. Because i have also looked for it too many time and couldn't find it.

How do I make my screen fit my monitor Windows 10? But, in Windows 8.1 (not sure about other OSs) there is possibility to scale items on screen, if they seem too small. You can check it, by calling context menu on desktop, select "Screen Resolution", and then select "Make text and other items larger or smaller". And the problem is, that, it seems, it does actually increase screen resolution!

You can try this:

var width = screen.width
var height = screen.height
width = width*window.devicePixelRatio;
height = height*window.devicePixelRatio;

alert("width : "+width);
alert("height : "+height);

Hope my answer helps!

scaling. Once you're there, you've won half the battle. I'm trying to detect screen resolution. But if I know the page zoom level, I can calculate the resolution too. Due to the fact that Windows scale setting and Page zoom level both affects devicePixelRatio value, but only Windows scale setting affects screen.width value, I can find it, if I know the page zoom level. – Petr K. Oct 30 '18 at 16:19

I need to detect screen resolution. The problem is, if scale setting in Windows 10 is not 100%, it affects screen.width / screen.height values. On English versions of Windows 7 that works great, but somehow Chinese versions skip right by this, and the form destroys itself, with controls not even showing up, font extremely large and pushing past the problem, picture boxes being moved around. So what is a good way to detect the Windows font scale (100%, 125%, and 150%) without detecting DPI?

Windows doesn't do the best job of scaling on high-resolution Thankfully, Windows 10 has settings that can help. But you've hooked it up to an external monitor with more old-school You can find out the specific density of your monitors (pixels per inch, Ctrl-0 will return the zoom to its default level. The most common display resolution is 96 dots per inch (DPI), which equals 100% display scaling, but higher resolution displays supporting 125%, 150%, 200% (which respectively equal 120, 144 and 192 DPI) and above are becoming more common.

Want to boost the scaling on your 1080p monitor by a little and your 4K display by a lot? resolutions or monitors with the same resolution but different screen sizes. Alternatively, you can go to Start > Settings > System > Display. At this point, Windows 10 may tell you that you need to sign-out and back  Note: If you see unexpected changes in your screen resolution, your graphics driver might need to be updated. To see and install available updates, select Start > Settings > Update & Security > Windows Update.

Comments
  • why do you want to detect the screen resolution? What problem are you trying to solve?
  • @ADyson, answered above
  • Your update doesn't make it clear why you "need to resize it to actual screen resolution". Why can't you just resize it to the reported size? Moreover in such a complex case as two interpolation algorithms working concurrently. What makes you think that rendering exact screen size x some ratio x some other ratio would make any good? There are big chances that you end up with mashed pixels anyway. Plus, if your users have such settings, they might have good reasons, and you may deserve them trying to against these settings.
  • @Kaiido I have tried to explain in the last update (sorry for my English)
  • I don't know why pepople give negative if they don't understand the issue.... This question is valid and giving +1 vote..
  • I totally forgot about vw/vh and :fullscreen in CSS. Thank you very much, it's very helpfull.
  • Thank you. Unfortunately, if in Windows the scale setting is set not to 100%, devicePixelRatio not reflects page zoom level.
  • what are trying to do ? detect screen resolution or the page zoom level.
  • I'm trying to detect screen resolution. But if I know the page zoom level, I can calculate the resolution too. Due to the fact that Windows scale setting and Page zoom level both affects devicePixelRatio value, but only Windows scale setting affects screen.width value, I can find it, if I know the page zoom level.
  • I think the answer i gave gives you the screen width and the screen height independently of the screen zoom
  • Yes it is, but not independently of screen scale settings in Windows 10.