MobileMeta.js
Small and lightweight JS library which saves a lot of time configuring mobile meta tags, such as viewport, home screen icons and startup screens for iOS web apps
Usage
Add script to HTML:
<script src="path_to/mobile_meta.min.js" ></script>
Initialize it with parameters:
var mm = new MobileMeta({ /*==/ Configure Viewport /==*/ viewPort : { initScale : 1, minScale : 1, maxScale : 1, width : 'device-width', scalable : 'no' }, /*==/ Home Screen Icons /==*/ icons : { iPad : 'path_to/icon_72x72.png', //<- For iPad iPadR : 'path_to/icon_144x144.png', //<- For iPad Retina iPhone : 'path_to/icon_57x57.png', //<- For iPhone , Android 2.1+ iPhoneR : 'path_to/icon_114x114.png', //<- For iPhone Retina default : 'path_to/icon.png' //<- For other and old browsers }, /*==/ Web App /==*/ webApp : { //iOS Status Bar - 'default', 'black' or 'black-translucent' statusBar : 'black-translucent', //Startup screen image startup : { iPad_L : 'path_to/startup_1024x748.png', //<- For iPad in Lanscape orientation iPad_P : 'path_to/startup_768x1004.png', //<- For iPad in Portrait orientation iPadR_L : 'path_to/startup_1496x2048.png', //<- For iPad Retina in Lanscape orientation iPadR_P : 'path_to/startup_1536x2008.png', //<- For iPad Retina in Portrait orientation iPhone : 'path_to/startup_320x460.png', //<- For iPhone, only in Portrait orientation iPhoneR : 'path_to/startup_640x920.png' //<- For iPhone Retina, only in Portrait orientation } } });Viewport (optional)
Will generate the following META tag depending on parameters:
<meta content="width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1; user-scalable=no" name="viewport">
Available parameters: initScale, minScale, maxScale, width, height, scalable. All parameters are optional including 'viewPort' itself
Icons (optional)
URL to icons for different devices. Will add the following HTML in the HEAD for specified icons:
<link sizes="72x72" rel="apple-touch-icon-precomposed" href="path_to/icon_72x72.png"> <link sizes="144x144" rel="apple-touch-icon-precomposed" href="path_to/icon_144x144.png"> <link sizes="57x57" rel="apple-touch-icon-precomposed" href="path_to/icon_57x57.png"> <link sizes="114x114" rel="apple-touch-icon-precomposed" href="path_to/icon_114x114.png"> <link rel="shortcut icon" href="path_to/icon.png">
All parameters are optional
Web App (optional)
- Status Bar (optional)
Script will add the following META tag to head :
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- Startup images (optional)
It will help you to specify startup screen images for different iOS devices in different orientations. For example, for iPad Retina script will add the following LINKs to head:
<link href="path_to/startup_1496x2048.png" rel="apple-touch-startup-image" media="screen and (orientation: portrait)" > <link href="path_to/startup_1536x2008.png" rel="apple-touch-startup-image" media="screen and (orientation: landscape)" >All parameters are optional
License
The Unlicense (aka: public domain)