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!
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.
Related
I have been looking at way to detect what screen size I am working with for a website. i.e. iPhone, desktop, tablet, etc.
So far I have come across quite a few methods. I am just looking to see if there is a preferred method, one that is more universal, etc. I realize there is rarely a one size fits all method. Just looking for the best.
If it makes a difference, the website will be a very minimalistic website. It's more of an add-on page for an app. So there will no bells and whistles on it.
window.innerWidth
...
screen.width
...
document.body.clientWidth
...
window.outerWidth;
window.innerWidth = the inner width of your current window (as you adjust the size it will give you the actual width of the window itself... ideal for responsive development).
screen.width = the size of your actual screen.
For application development, I'd recommend utilizing window.innerWidth.
What does screen.width java-script property really holds? If it is just device-width which is as far as i know constant per device?
I'm a little confused because i noticed that changing device orientation (android phone) causes screen.width to change while everywhere i read device-width is constant.
The device-width holds the fixed physical width of the device.
While the screen.width holds the rendering width of the screen.
The phone device, whatever the direction in which it's inclined, will still be the same device ; while the 'pixel space' in which the web page is rendered may double.
Maybe W3C explains this better, see here.
Cheers.
I'm trying to detect the actual monitor resolution or size using either JQuery or JavaScript, the screen.availWidth or screen.width seem to work in all browsers except for firefox and explorer...
If the window is maximized it will get the information but if the window was scaled down or even zoomed it doesn't give the monitor resolution but looks at the window instead...
I've gone through several posts on here but haven't found anything and I think most of them are not stating the fact that the window size might not be maximized or zoomed when getting the wrong type of information...
I'm hoping there's a solution I'm missing, thanks ahead for any help ;)
JavaScript var x = "Available Width: " + screen.availWidth;
With jQuery:
$(window).width();
$(window).height();
In analytics data, IE8/9 appear to be reporting different, sometimes non-standard resolutions from screen.width / height on the same device, for instance: 1140x641, 1366x768, 1249x702. Those variables are supposed to report screen resolution, not something flexible like browser viewport size, and so I would expect them to always be fixed.
Is it possible that the data I have is accurate, i.e. that these could all be from a single device? Or am I without doubt actually observing three different devices?
Googling reveals this and this which are examples of IE8's screen resolution reporting being inaccurate, but do not explain why the values might change over time. Are there other known issues with these variables?
Background is here, the screen.width variable is being called by Google Analytics code on user machines. I'm trying to understand the anomaly by eliminating possibilities as I think of them.
In fact MSIE and Firefox adjust the physical screen resolution with the zooming factor being applied in the browser into the screen.width value.
This is why you get odd dimensions for MSIE and Firefox, but not Safari nor Chrome
See also How to detect page zoom level in all modern browsers? about detecting zoom level per browser.
Toying around with the WebKit browser in the new Kindle 3G, I noticed that window.screen.width and window.screen.height don't reflect the actual screen dimensions. The physical screen (or rather, paper) dimensions are 800 x 600. I get:
800 x 506 in landscape mode
600 x 706 in portrait mode
But interestingly, both Chrome and Safari (which are also WebKit) running on my desktop report the actual screen resolution.
According to MDC, these properties are not part of any specification, so there's probably no strict definition of what width/height should report. But, shouldn't it be expected that they reflect the actual screen dimensions?
Update:
The issue we see in the emulator with window.screen.width is when we use screens which don't reflect the actual pixels of the device. So what you see on the screen is 320 and what the device has is 480 or whatever. I don't understand, though, why the value of screen width would give the emulator size on the screen and not the actual pixels.
This thing might be the same issue with the devices? If their density is higher at some sizes... for whatever the reason this could translate to some wrong screen width size?
Anyway, read below for my solution.
screen.availWidth does not work for me on certain screen sizes on the emulator.
Only thing is working for me now is:
window.innerWidth
window.innerHeight
Which will return the value of the Viewport. In my case I'm running an HTML5 app. This values will not update on zoom, apparently.
They have some issues with this sizes on Android's Webkit. You can see the devs from Android talking about it here. Probably fixed in Honeycomb.
Somebody claims it takes some sizes as if the soft keyboard would be present.
I think WebKit can do nothing if it's getting wrong values from system. Sure these values should be represented by screen.availWidth and screen.availHeight, but I think this is related to event.screenX and event.screenY for mouse (pointer) positions.
It would seem that screen.availWidth and screen.width are both returning the availWidth all the time, on many mobile operating systems.
I was unable to find any documentation on this however I did tested Android 2.2 and got the screen size minus the top menu bar exactly no matter what a requested.
The difference are because the size of the Android status bar and or the bottom bar.