Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Insanity of Apple-specific meta tags..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Apple Meta Insanity</title>
<!--
APPLE WEB APP META TAGS
-->
<!-- Sets whether a web application runs in full-screen mode.
See: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW3 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Sets the style of the status bar for a web application.
See: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW4 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Sets the display title of a web app (undocumented by Apple).
See: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers -->
<meta name="apple-mobile-web-app-title" content="page title">
<!-- Possible values are: "portrait", "portrait-upside-down", "landscape-right", "landscape-left", "portrait-any"
See: https://github.com/WebKit/webkit/blob/master/Source/WebCore/html/HTMLMetaElement.cpp#L79
See: http://www.opensource.apple.com/source/WebCore/WebCore-855.7.1/html/HTMLMetaElement.cpp
See: https://trac.webkit.org/changeset/160679/trunk/Source/WebCore/dom/Document.cpp
See: https://trac.webkit.org/browser/trunk/Source/WebCore/ChangeLog?rev=160679 -->
<meta name="apple-mobile-web-app-orientations" content="portrait-any">
<!--
WEB APP ICON AND SHORTCUT ICON META TAGS
-->
<!-- Web clip icon for Android homescreen shortcuts. Available since Chrome 31+ for Android.
See: https://developers.google.com/chrome/mobile/docs/installtohomescreen -->
<link rel="shortcut icon" sizes="196x196" href="/assets/images/icons/touch/chromeapp-touch-icon-196x196-precomposed.png">
<!-- For a full list of Apple icon sizes, see:
https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1
https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/WebClipIcons.html#//apple_ref/doc/uid/TP40006556-CH29-SW1 -->
<!-- Web clip icon for iPad 3+ with high-resolution Retina displays running iOS >= 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/assets/images/icons/touch/apple-ipad-retina-ios7-touch-icon-152x152-precomposed.png">
<!-- Web clip icon for iPad 3+ with high-resolution Retina displays running iOS <= 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/icons/touch/apple-ipad-retina-ios6-touch-icon-144x144-precomposed.png">
<!-- Web clip icon for iPhone 4+ and iPod touch with high-resolution Retina displays running iOS >= 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/icons/touch/apple-iphone4+-ipod-touch-retina-ios7-touch-icon-120x120-precomposed.png">
<!-- Web clip icon for iPhone 4+ and iPod touch with high-resolution Retina displays running iOS <= 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/images/icons/touch/apple-iphone4+-ipod-touch-retina-ios6-touch-icon-114x114-precomposed.png">
<!-- Web clip icon for iPad mini and the first- and second-generation iPad with standard-resolution displays running iOS >= 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/assets/images/icons/touch/apple-ipad1-ipad2-ipad-mini-non-retina-ios7-touch-icon-76x76-precomposed.png">
<!-- Web clip icon for iPad mini and the first- and second-generation iPad with standard-resolution displays running iOS <= 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/icons/touch/apple-ipad1-ipad2-ipad-mini-non-retina-ios6-touch-icon-77x72-precomposed.png">
<!-- Web clip icon for non-iOS devices that support Apple's touch icons (and if not Chrome 31+ for Android) -->
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/assets/images/icons/touch/universal-touch-icon-60x60-precomposed.png">
<!-- Web clip icon for iPhone 1-3 and iPod touch with standard-resolution non-Retina displays running iOS <= 6 -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/assets/images/icons/touch/fallback-touch-icon-57x57-precomposed.png">
<!-- Web clip icon for iPad 1 with standard-resolution non-Retina displays -->
<link rel="apple-touch-icon-precomposed" href="/assets/images/icons/touch/fallback-touch-icon-57x57-precomposed.png">
<!-- Fallback web clip icon for all devices -->
<link rel="shortcut icon" href="/assets/images/icons/touch/fallback-touch-icon-57x57-precomposed.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/ico" href="/assets/images/icons/icon-32x32.png">
<!--
APPLE WEB-APP STARTUP IMAGE META TAG
-->
<!-- iOS web application startup image
See: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6 -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 6 iPhone -->
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="/assets/images/icons/apple-appstart/apple-touch-startup-image-fallback.png">
<!--
APPLE "SMART APP BANNER" META TAG
-->
<!-- Add an Apple "Smart App Banner" when displaying a page on iOS devices.
See: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID">
<!--<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">-->
<!--<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL, affiliate-data=myAffiliateData">-->
<!--
APPLE FEATURE DETECTION META TAGS
-->
<!-- Disables automatic detection of possible phone numbers in a webpage in Safari on iOS.
See: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW5
See: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/html/const/format-detection -->
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
</head>
<body>
<h1>Apple Meta Insanity</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment