A page that's not high enough to fill up the entire screen, will always show the address bar (and if enabled, the Debug Console).
For many reasons (but mainly because it's ugly!) you would want to prevent this.
for the body element, so that your page will always take up the entire screen.
See the example on an iOS device.
In Mobile Safari, there are 16 different sizes your page can be loaded into.
To reduce this number, iOS.js
always maximizes the window to the largest available size, which makes 4 sizes redundant.
Click here to see a list of sizes.
When running your page as a webapp, all links will open in the safari browser and yank you out of your webapp (even when these links are to the same domain/website).
iOS.js fixes all links in the page to open in the webapp, unless a different target is provided (
When your site uses a
, this will result differently than you'd think.
A 100% refers to the height of the initial frame your page loads in.
To get the size that you need, you can call three different functions.
This will return the actual pixel size of the window the page gets loaded into.
This will return the size of the window translated to the viewport size (default value is: width=980px).
This is the size you should use for a full screen layout without scrolling.
This will return the size of the page.
var size = iOS_getViewportSize();
var bottomBar = document.getElementById("bottomBar");
bottomBar.style.top = size.height + "px";
Hides the address bar
iOS.js hides the address bar when the page is loaded, as well as when you change orientation.
Unlike other scripts that will always jump to the top of the page, it checks to see if the navigation bar is visible before scrolling to the top of the page.
iOS specific CSS
With iOS.js you can create styles strictly for iOS devices.
It applies an
.iOS class to the
Device family specific CSS
iOS.js creates a way to style different device families in CSS.
Device specific CSS
iOS.js creates a way to style different devices in CSS.
Orientation specific CSS
iOS.js creates a way to style different orientations in CSS.
Use different styles or images for the retina display.
background-size: 100px 100px;
iOS.js creates functions for disabling scrolling, for a more native feeling.
iOS_disableScrolling(); and to enable it again
iOS_disableZooming(); and to enable it again
To get information about the device or page, there are the following functions you can call:
For getting the window size, the normal way.
For getting the correct window size.
For getting size of the viewport (as specified in the viewport meta tag).
For getting size of the page.