iOS.js Features


Beneath you can find a list of features iOS.js brings to your webpage.

Fixes

Minimum height
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.
iOS.js sets the min-height 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.
100% heights
When your site uses a height=100%, this will result differently than you'd think.
A 100% refers to the height of the initial frame your page loads in.
In case you need to correct this to be the actual size of the window (after the address bar is hidden), you can do this using javascript.
To get the size that you need, you can call three different functions.
  • iOS_getWindowSize();
    This will return the actual pixel size of the window the page gets loaded into.
  • iOS_getViewportSize();
    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.
  • iOS_getPageSize();
    This will return the size of the page.
Example:
function updateLayout()
{
var size = iOS_getViewportSize();
var bottomBar = document.getElementById("bottomBar");
bottomBar.style.top = size.height + "px";
}

window.addEventListener("load", updateLayout);
window.addEventListener("orientationchange", updateLayout);
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.

CSS

iOS specific CSS
With iOS.js you can create styles strictly for iOS devices.
It applies an .iOS class to the <html> tag.
.iOS{}
Device family specific CSS
iOS.js creates a way to style different device families in CSS.
.iOS[deviceFamily=iPhone_iPod]{}
Device specific CSS
iOS.js creates a way to style different devices in CSS.
.iOS[device=iPad]{}
Orientation specific CSS
iOS.js creates a way to style different orientations in CSS.
.iOS[orientation=landscape] {}
Retina display
Use different styles or images for the retina display.
.header
{
background: url(header.png);
background-size: 100px 100px;
}
.iOS.retina .header
{
background: url(header@2x.png);
}


There is also a function for detecting the retina display in javascript: iOS_hasRetinaDisplay();

Javascript

Disable zooming in javascript
iOS.js creates functions for disabling scrolling, for a more native feeling.
iOS_disableScrolling(); and to enable it again iOS_enableScrolling();
Disable pinch-to-zoom in javascript
Instead of setting the viewport meta tag to user-scalable=no, you can also choose to turn it on and off using javascript.
iOS_disableZooming(); and to enable it again iOS_enableZooming();
Get functions
To get information about the device or page, there are the following functions you can call:
iOS_isiOSDevice()
iOS_isiPhone()
iOS_isiPod()
iOS_isiPad()

iOS_hasRetinaDisplay()


iOS_normalGetWindowSize()
For getting the window size, the normal way.

iOS_getWindowSize()
For getting the correct window size.

iOS_getViewportSize()
For getting size of the viewport (as specified in the viewport meta tag).

iOS_getPageSize()
For getting size of the page.