I need to find the screen width of a device with JavaScript, I am unable to change the html and do not want to inject the meta viewport tag before doing so. Essentially I need to detect whether the device width is below 600px (in CSS pixels).
I have seen various recommendations but unfortunately I am getting different behaviour between iOS Safari and the default Android browser:
Command iPhone4 GalaxyS3
------------------------------------------------------------------------
window.devicePixelRatio 2 2
window.innerWidth 982 626
window.outerWidth 326 720
screen.width 320 720
screen.availWidth 320 720
matchMedia('(max-width: 599px)').matches false false
matchMedia('(max-device-width: 599px)').matches true false
Unfortunately the inconsistencies of the above values means I don't seem to be able to do it with JavaScript (e.g. I could divide screen.width by window.devicePixelRatio on Android, but this would then be incorrect on iOS).
Is there a reliable, cross browser way of doing this?
You could try using Verge viewport utility. It's an open source library. Then you could simply use:
$.viewportW() // Get the viewport width in pixels.
Hope this helps!
Related
As far as I know it's the ratio between the "abstract" resolution and the device's physical resolution. So I test it (on HTC Desire), the physical resolution is 480x800, it's logged out the ratio is 1.5. I threw in some elements, but it still take exactly 480px width to fill the viewport where my naive thought it's need '320px'?
From http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html, where the author discusses the differences in devicePixelRatio across mobile devices:
On iOS Retina devices, screen.width gives the width in dips. So both a
retina and a non-retina iPad report 768 in portrait mode. On the three
Android devices, screen.width gives the width in physical pixels; 480,
720, and 800, respectively. All browsers on the devices use the same
values. (Imagine if some browsers on the same device used dips and
others physical pixels!)
Which leads the author to the following conclusion:
On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count.
On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the dips count.
What matters in your case is screen width, plain and simple. The calculation of DIPs is something for the device to take care of, rather than you as the developer. If the device wants to compensate for a different pixel ratio, it will serve you a width in DIP and give the ratio. If it feels that pages should be displayed with the native unmodified pixel resolution, it will serve you that width instead. The author of the post also comes to the following conclusion which I find interesting:
Apple added pixels because it wanted to make the display crisper and smoother, while the Android vendors added pixels to cram more stuff onto the screen.
At any rate, use the width the browser gives you and leave it to the device to compensate.
One of my test phones is a Galaxy S3 Mini. The specs of this phone say it is a 800x480 resolution.
However, when I do the following in my HTML game:
window.innerWidth
window.innerHeight
It gives 533 for the width and 295 for the height.
Now I've read about window.devicePixelRatio, and for my phone it is 1.5
But how can this help me make my design look good?
The problem is that my game is designed for 800x480, and it looks stretched because of this.
use this, to get Width & Height:
WindowManager wm = getWindowManager();
Display d = wm.getDefaultDisplay();
d.getWidth() and d.getHeight()
The window.inner.. properties refer to the browser, not to the resolution of the screen. They are usually smaller, due to status bars, address bar and other toolbars, window borders and so on.
I have an info box that I would like to popup on a mobile website, the info box has a responsive design and sets the width to the full width of the page and also takes into consideration the zoom level.
How I do this in IOS and Newer Androids: I get the window.innerHeight and window.innerWidth and compare them with screen height and width. However, in Android 2.2 window.innerHeight and window.innerWidth do not report the right values. Can anyone think of a way around this?
I've observed a problem on Android 2.2 and 2.3 native browser where device-width CSS media query and window.screen.width both report sizes based on your webpage document and scaling applied.
Example: 1:1 scaling, 960px wide page will show proper device width (say, 320px)
Example: fit-screen scaling, 960px wide page, improperly reports 960px device width
So with appropriate viewport meta tag content it seems predictable. However, in my case I cannot rely on the meta tag. Does anyone use a workaround to get a reliable device width measurement in Android irrespective of viewport meta tag? Other platforms do report this correctly across all scaling.
Ref:
http://code.google.com/p/android/issues/detail?id=11961
window.outerWidth and window.outerHeight always report the browser pixels (ie screen resolution minus UI bars, typically 480x762 on a Galaxy S.)
You may then to throw in window.devicePixelRatio to calculate the virtual pixel width (320px).
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.