-2

I would like to get the dimensions of the monitor. I would also call that the screen size, but apparently, that is not the same.

I have tried:

screen.width 
screen.height 
screen.availWidth 
screen.availHeight
globalThis.screen.availWidth 
globalThis.screen.availHeight

The thing is, all of these change when I change the browser window size. The monitor (screen?) does not. It is hardware.

Surely the OS knows the monitor's size. Surely it would be trivial to make that information available through JavaScript.

The reason I need this is that I am trying to determine if they are on a desktop, tablet, or mobile device. The size of their browser window is irrelevant.

Thanks for the help!

Blake McBride
  • 394
  • 3
  • 16
  • Does this answer your question? [How to detect the screen resolution with JavaScript?](https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript) – Sara Stoimenovska Nov 13 '22 at 21:26
  • 4
    _“I am trying to determine if they are on a desktop, tablet, or mobile device”_ — But why? And why do you think this is necessarily connected to screen size? – Sebastian Simon Nov 13 '22 at 21:26
  • 4
    Why should the user want you to know if they are on a desktop/tablet or mobile device, and what makes you think the screen resolution would tell you that? (Hint, an iPhone X has a higher resolution than the 15" laptop I'm typing this on) – user1937198 Nov 13 '22 at 21:27
  • Thanks, Sara, but those number change when I change the browser window size, The number I am looking for do not change when the browser window is resized. – Blake McBride Nov 13 '22 at 21:31
  • @BlakeMcBride If given a resolution of 1125 x 2436 px, what sort of device is that? – user1937198 Nov 13 '22 at 21:32
  • 5
    *“Surely the OS knows the monitor's size. Surely it would be trivial to make that information available through JavaScript.”* It would be, and it was, and now it isn’t because it has privacy implications and there’s no good reason to give websites that information. – Ry- Nov 13 '22 at 21:32
  • Thanks, Sebastian. Unlike many who attempt to dynamically reconfigure controls based on the browser window size, I prefer to detect the resolution and use different code. This makes more sense for instances I encounter. – Blake McBride Nov 13 '22 at 21:34
  • Thanks, Ry. The privacy answer makes the most sense to me. So, the answer is not how. The answer is it is specifically not possible due to privacy concerns. – Blake McBride Nov 13 '22 at 21:36
  • @BlakeMcBride Have you considered user agent sniffing might be a more reliable option if you are going to maintain such a database? – user1937198 Nov 13 '22 at 21:36
  • 2
    Why do you need the size of the display instead of the size of the browser window? _"I am trying to determine if they are on a desktop, tablet, or mobile device"_ Why? Do you want to show different websites on a tablet and a desktop pc with same display size? – jabaa Nov 13 '22 at 21:41
  • What's the difference between a small tablet and a large smartphone? What is a convertible? A desktop, a laptop or a tablet? – jabaa Nov 13 '22 at 21:47
  • @jabaa If a desktop, laptop, and tablet had the same monitor size, I would treat them the same. The point is, I don't want to treat a desktop (or laptop) like a mobile device just because they have the browser window small. They can enlarge it. – Blake McBride Nov 13 '22 at 21:54
  • 1
    There’s a reason that responsive design is considered best practice and widely used. People set window sizes intentionally for all kinds of reasons (split-screen multitasking, which all current desktop OSes support explicitly by docking); devices change size and capability (when monitors are added and removed or windows are moved between them, laptops are converted to tablet mode, foldables are folded, …). – Ry- Nov 13 '22 at 22:25
  • @Ry "Best practices" notwithstanding, in my experience, responsive design works really well in simple cases but is utterly worthless in large, complex cases. In large, complex cases, you need to detect their display size and use the appropriate interface. – Blake McBride Nov 13 '22 at 22:47
  • I found the problem. screen.width and screen.height do, in fact, return the monitor size. These numbers do not change when the browser window is re-sized. And there is no privacy issue around this. The problem is a bug in the Brave browser. – Blake McBride Nov 14 '22 at 01:22

1 Answers1

0

I found the problem. screen.width and screen.height do, in fact, return the monitor size. These numbers do not change when the browser window is re-sized. And there is no privacy issue around this. The problem is a bug in the Brave browser.

Blake McBride
  • 394
  • 3
  • 16
  • 1
    These don’t work in a significant Firefox configuration (privacy.resistFingerprinting), intentionally, because of the privacy issue. Given that Brave is privacy-focused, I assume it’s intentional for it too? – Ry- Nov 14 '22 at 02:03