Get The Static Screen Width of A Device Using Pure Javascript - javascript

I am returning image quality on my webpage based on the physical width of a device. This value should be static. The most reliable solution I know so far must be screen.width property.
However, in the current Firefox I am using, the value of screen.width is not static. When I switched to responsive design view (or ctrl + shift + m), then querying screen.width, the value corresponded to current viewport width, not the real physical width.
I noticed this when switching to the responsive design view, and reload the page, all images were blurred, having very bad quality.
So, is there some way I can get the static or real physical screen width of a device using pure Javascript? Maybe a tiny library?

screen.availWidth and screen.availHeight will give you the actual available width and height

Related

How can I get the monitor dimensions in JavaScript

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.

$window.innerHeight returns different values in chrome and firefox

I want to determine the viewport height with $window.innerHeight or document.documentElement.clientHeight but it turns out that Firefox and Chrome are returning different values (a few pixels).
Anyone already faced this issue?
The height of the body is determined by the available height inside the browser window.
Different browsers have different graphic interfaces, varying toolbar heights, number of toolbars, etc. All those elements will influence the height available for the actual HTML content.
Try the following in various browsers (in full size)
console.log(document.documentElement.clientHeight)
The height you are getting is more that likely because the design of firefox and chrome are different by a few pixels. I can resize my browser to however I want. Monitor and resolution also determines that. Not really an issue if you are designing your UI correctly, meaning using media queries in CSS and creating a responsive design instead of fixed values.

Javascript: Reliable way to get screen width and height

I am currently using screen.height and screen.width to query screen size from the user. However, it seems that these functions do not always work. Is there a way to make query in a reliable way (across all browser and operating systems)?

Value of the screen.width JS property

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.

Why does webview report different screen size, and can I disable this

So basically, I created an Android WebView, in a 720 x 1280 screen. However when I evaluate screen.width and screen.height, the response is 360 and 640.
I understand that this may be partly so that content is displayed on a readable way, but, when I tried to set a static width to the WebView, like 1000px x 1000px, the Javascript still evaluates the same.
Is there a way to disable this, so that the content looks same as it would on a desktop screen, and the screen.width and screen.height return the real phone resolution or the one I manually set in the XML.
A Crosswalk (based in chromium) solution is also acceptable, even if it includes changing the source code, if WebView solution is not possible.
If I understand you right, you want to show websites in desktop mode, not in mobile mode. To achieve this you can use this custom subclass of WebView: https://github.com/delight-im/Android-AdvancedWebView
It has a method setDesktopMode(true) that will do what you want.
This maybe be due to the pixel ratio of the device.
see this thread for a detailed explanation
Note that different android screens will have different ratios depending on their resolutions. My experience is with iphone / ipad; and my solution was to detect the pixel ratio and use that as a multiplier for positioning all elements.
Also If feasible, I recommend positioning based on a multiplier rather than a fixed value. For example:
x = 0.5 * screen.width * xPixelRatio
will give you a relative position at 50% (i.e the middle) of the screen. By positioning elements in this way as long as your aspect ratio is the same the elements will always stretch to fit properly, and you can adjust for different aspect ratios by changing the xPixelRatio & yPixelRatio variables.

Categories