CSS Mobile

app manifest

{
    "version": "1.0",
    "name": "Your App Name",
    "description": "Your new awesome HTML5-based mobile web app!",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/mylogo-16.png",
        "48": "/img/mylogo-48.png",
        "128": "/img/mylogo-128.png"
    },
    "developer": {
        "name": "Developer Name",
        "url": "http://yourawesomeapp.com"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "es": {
            "description": "Su nueva aplicación impresionante Open Web",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        },
        "it": {
            "description": "Il vostro nuovo fantastico Open Web App",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        }
    },
    "default_locale": "en"
}

Detect Orientation Change

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    console.log(window.orientation);
    // 0 means portrait, 90 means landscape rotated to the left, -90 means landscape rotated to the right
}, false);

Hide the Address Bar

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

html

<!-- Launch the Photo Choose -->
<input type="file" name="image" accept="image/*" capture>

Style Selection Background

/* lets try a lighter blue... */
html {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

/* for some buttons or links, simply hide the selection color all together */
.no-highlight {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

WebKit CSS Madness

/* don't let iOS' "actions" dialog to come up when element is touch/held */
.prevent-action {
    -webkit-touch-callout: none;
}

/* no dragging of element at all */
.content p.no-drag {
    -webkit-user-drag: none;
}

/* drags entire element, not the text/selection */
.sidebar div.element-drag {
    -webkit-user-drag: element;
}

/* change the character used to hide user passwords */
input[type="password"] {
    -webkit-text-security: square;
}