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?
Related
I want to calculate browser height without considering browser address bar and bottom navigation bar height.
The value of screen.height will give the full browser height. I've highlighted area in orange in attached image. Looking for generic solution which will work on all mobile devices
Easily:
window.innerHeight
There is an algorithm to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.
See also the offical docs.
Is there a way to identify whether bookmark/Navigation tool bar is visible using javascript.
I tried using window.innerHeight == $(window).height(), seems its not consistent as it is showing different in Landscape and Portrait.
Can any one suggest me a solution
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'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.