Skip to content
This repository has been archived by the owner on Nov 23, 2018. It is now read-only.

The Markup

Jump to bottom
Jeff Welch edited this page Jan 26, 2014 · 17 revisions

###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 introduced 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.

###Home screen icon set

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">

For the iPhone 4 with high-resolution Retina Display

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">

For the first-generation iPad

<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">

For non-Retina iPhone, iPod Touch, and Android 2.1+ devices

<link rel="shortcut icon" href="img/l/apple-touch-icon.png">

For Nokia devices

###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

<link rel="apple-touch-startup-image" href="img/l/splash.png">

Specifies a splash image to use when the page is loading

###More tags for your 'head'

<!-- more tags for your 'head' to consider https://gist.github.com/849231 -->

Other tags that can be used in the head section

Clone this wiki locally