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.
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.
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
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!
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?
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.