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.
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.
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
I was trying to understand about screen.width when viewing e.g. New York Times on my Android and iOS devices. Here are what I found (all viewed at portrait orientation):
screen.width returned 320 when I remote-debugged my iPod touch, which is supposed to have a 640x1136 resolution.
screen.width returned 384 when viewed on my Nexus 4, which is supposed to have a 768x1280 resolution.
Shouldn't screen.width return the resolution of the device? If not, what JavaScript object could I use to reliably get the resolution info?
What seems to be getting me the correct coordinates is window.innerWidth and window.innerHeight. I can guarantee they'll work, but they probably will. If they don't, make sure that the website isn't zoomed in (some mobile browsers zoom automatically)
What's basically going on here is that, to make sure that older sites render properly on these devices, Apple made the decision to report the original sizes when they moved to the retina display on the iPhone. Because of this precedence, Google made the same decision. If you are at your PC and it has a resolution of 1024x768, it will likely be a 10+ inch display. This would not translate well to a device that is only 4 or 5 inches diagonally, at least that's the rationale.
For a more in-depth look at this idea, I suggest you check out quirks mode's blog post about it, which you can find here
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.