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)?
Related
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.
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.
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.
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.
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