Skip to content

Instantly share code, notes, and snippets.

@jamesmrobinson
Last active December 26, 2015 02:18
Show Gist options
  • Save jamesmrobinson/7077049 to your computer and use it in GitHub Desktop.
Save jamesmrobinson/7077049 to your computer and use it in GitHub Desktop.
Web app head markup notes

##Conditional comment for Window Phone 7

<!--[if IEMobile 7 ]>    <html class="no-js iem7" manifest="default.appcache?v=1"...> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"...> <!--<![endif]-->

Conditional comment to add class iem7 for Window Phone 7

##Mobile viewport optimization

<meta name="HandheldFriendly" content="True">

The HandheldFriendly meta-tag was used initially by older Palm and Blackberry models as well as browsers like AvantGo.

<meta name="MobileOptimized" content="320">

Microsoft indroduced the MobileOptimized tag for the PocketPC.

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

This is more widely supported by modern smartphones, including but not limited to: iOS, Android, Palm Pre, Blackberry, Windows Phone 7.

##Icon set

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="_img/icon/icon-152.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="_img/icon/icon-144.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="_img/icon/icon-120.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="_img/icon/icon-114.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="_img/icon/icon-76.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="_img/icon/icon-72.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57px): -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">

##Mobile Internet Explorer ClearType Technology

<meta http-equiv="cleartype" content="on">

Mobile Internet Explorer allows us to activate ClearType technology for smoothing fonts for easy reading

##iOS web app

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

Makes the web page run in full screen mode when launched from the home screen icon; also hides the address bar and component bar at the top and bottom of the browser.

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

Styles the bar at the top of the browser

####Startup "Splash" Images

<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="_img/splash/iphone4.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="_img/splash/iphone5.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="_img/splash/ipad-startup-768-1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="_img/splash/_img/splash/ipad-startup-1024-748.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="_img/splash/ipad-startup-1536-2008.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="_img/splash/ipad-startup-2048-1496.png">

Specifies a splash image to use when the page is loading

####Disable format detection

<meta name="format-detection" content="telephone=no"/> 
<meta name="format-detection" content="address=no"/>

##Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment