Tips for Smart Phone App Coding

Mainly two ways to show different interface due to different devices:

1. Load matching stylesheet

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

2. Add media queries in CSS

@media screen and (min-device-width: 481px) { ... }

Viewport Meta Tag Options

1. Make the viewport width match user's device-width


<meta name="viewport" content="width=device-width" />

2. Forbid users to scale (make it more like an App)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />

Web Application Configuration

1. Set the home screen icon (57x57 by default)

<link rel="apple-touch-icon" href="/custom_icon.png"/>

2. Images for different devices

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

3. Hide iPhone button bar

<meta name="apple-mobile-web-app-capable" content="yes" />

4. Change the style of status bar

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

5. Hide the URL bar when webpage loading ends

window.onload = function(){
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 100);
}

6. If rotating is allowed

$(window).resize(function() {
  window.scrollTo(0, 1);
});</pre>

7. Disallow users to scroll

document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);