Do you have a requirement to hide url bar on mobiles?
If so read on. This is may be for you!
This is
NOT for you if:
- If your page is bigger than the height of the phone you DON'T have this issue. This will use the normal browser scroll. Your solution is simply: window.scrollTo(0, 0);
This is for you if:
- If for some reason, your requirement is to have a page height on the size of the phone height. Eg.: page with a Map. Google Maps mobile is an example. Obviously the other example is the company that I work for... coincidentally a map engine company too.
- Maybe you have some static header and footer with scrollable content in the middle. I always try to push back those kind of UX designs. Currently mobiles on the market struggle to do a "overflow-y: auto" on a div that has fixed height. Eg.: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow . It may work on iPhones, some androids but when you build an real world app you'll have a hard time with buggy scroll devices.
The main advantage of hiding URL or address bar is to get extra space for content. UX's love that so do users.
Assuming that you have a web page with some CSS:
#map{
height: 100%;
width: 100%;
}
And your page looks like this one:
![]()
Note the huge chunk of screen wasted because if the address bar. It is even worse with debug bar as well.
This is what we want to achieve:
So much better now. Look at the big map taking over the whole available visible area of the phone.
So back to the problem...
Height 100% on div map won't do the trick. You also don't want to hardcode the height in pixels either.
If you disable debug console, this code "window.innerHeight" returns 356 at this point.
This is not the height that we want.
$(window).height() returns the same 356. This function is not ideal for what we want. Avoid it.
As I said before, there is no scrollable content. We need it. So we will
force the page to get bigger in order to get real height using
window.innerHeight.
those are the steps:
- make dummy yellow div bigger than all the bars together: $("#dummyHeight").height( $(window).height() + 400 );
- scroll to the top: window.scrollTo(0, 1);
- wait 300 millisecs and now get the real height: window.innerHeight;
- At this point you can set up the height of the map with all the available height: $("#map").height(realHeight);
If you have scrollable content in your page (content is bigger than phone height), the jQuery function "$(window).height()" still returns 356 - wrong. The correct value 416 is return by the old school property "window.innerHeigh".
The trick here is use "window.innerHeight". I have seen lots of people using $(window).height() or window.height. Anything other that "window.innerHeight" will return the wrong value.
You may not need this yellow bar on your real app. I only use it because we don't like the map jumping around too much with resizing.
I am not gonna explain every single line here. I will post the source code and you look at it.
Running this example:
All you need to do is copy, paste in a dummy html file, search in a web application, load in a phone and see it working. Link to the code is at the end.
Be aware that this yellow bar in for demonstration only. In real app you would make it invisible.
On this example, drag the yellow bar up/down in order to confirm that the map has got the desired height. You can also click on the yellow bar in order to scroll to top again.
Please excuse me the CSS and JS in the html. This is a demo only. The important part is the JS function to do the job. I have got a more elaborated version of this code caches the calculation after the first time per orientation.
Verions 1: Source Code for this working example is here
This version one is very simple. I will make it fancy on version 2 of this code:
- simple and effective calculation to hide url bar
- recalculation hooked up on window.resize for now.
Version 2: The second verison will provide (yet to come):
- calculation caching. It will do it only once per orientation, save it and reuse it when necessary.
- hook up on orientationchange event.
Tested on:
- iPhone 5, IOS 6.1.2
- iPhone 4S, IOS 6.1.2
- iPhone 4S, IOS 5.1
- iPhone 3GS, IOS 6.x
- Samsung Galaxy S4, Android 4.1.2
- Samsung Galaxy S3, Android 4.1.2
- Samsung Galaxy S2, Android 4.1.2
- Samsung Note 2, Android 4.1.2
- HTC One, Android 4.1.2
- Sony Xperia 4G (pretty sure tested on it)
Some phones don't seem to be possible to hide URL bar:
- Nokia Lumia 920, Windows 8
Please leave your feedback. We have been though a lot of issues with mobile resizing. Feedback is always welcome.
cheers
Leonardo Correa
