


/*
*
* by default Safari takes the document’s title and crop it to 13 characters. From iOS 6 we can define an alternative title for the Home Screen using:
* <meta name="apple-mobile-web-app-title" content="My App Name">
*
*
* iPhone 1-4s 
* 320 x 356 px       
*              iPhone 1-4s      iPhone 5
*
*              640×1096
*
* Portrait (WxH)	320 x 356 px
* (320 x 416* / 320 x 460**)	320 x 444 px
* (320 x 504* / 320 x 548**)
* Landscape (WxH)	480 x 196 px
* (480 x 256* / 480 x 300**)	568 x 196 px
* (568 x 256* / 568 x 300**)
* * – measurements without the browser navigation bar
* ** – measurements without any browser chrome for a web app
* The default full screen size of the iPhone 5 is 568 x 320 px (w x h). This is half of the screen resolution because of the pixel doubling in a Retina Display.
*

var p = navigator.platform
, iOS = p == 'iPad' || p == 'iPhone' || p == 'iPod'

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false );


var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};



){
		    iOS = true;
}
<meta id="testViewport" name="viewport" content="width = 380">
<script>
if (screen.width > 740) {
		var mvp = document.getElementById('testViewport');
			mvp.setAttribute('content','width=740');
		}
		</script>
* */



!function(d, n) {
	var head = d.head || d.getElementsByTagName("head")[0]
  if ("standalone" in n) {
		/* iOS
		* [1] iOS always report screen.width 320 (iPhone 1-4) or 768 (iPad) regardless of orientation
		* height 480 = 320x460
		* height 1024 = 768x1004
		*/
		El.get(head).append(
			[ El("meta", { name:"apple-mobile-web-app-capable", content:"yes"})
			, El("meta", { name:"apple-mobile-web-app-status-bar-style", content:"black"})
			, El("link", { rel: "apple-touch-startup-image"
					         , href: "startup_" + screen.height + ".png"
			             , media: "screen and (orientation:landscape)"})
			, El("link", { rel: "apple-touch-startup-image"
					         , href: "startup_" + (screen.height - 20) + ".png"
			             , media: "screen and (orientation:portrait)"})
			]
    )
  }

}(document, navigator)


/*
				<!-- startup image for web apps - iPad - landscape (748x1024) 
						 Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
						 <link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

						 <!-- startup image for web apps - iPad - portrait (768x1004) -->
						 <link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

						 <!-- startup image for web apps (320x460) -->
						 <link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />
*/

				

// Android 2.1 will only use the icon 
// if you link to it with a rel value of "apple-touch-icon-precomposed". 
// http://mathiasbynens.be/notes/touch-icons
	//<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">
	//<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
