Skip to content

Instantly share code, notes, and snippets.

@js62789

js62789/iOS-7-web-app.html

Forked from tfausak/ios-8-web-app.html
Created April 8, 2014 17:46
Show Gist options
  • Save js62789/10162059 to your computer and use it in GitHub Desktop.
Save js62789/10162059 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
iOS-7-web-app.html
<!doctype html>
<html>
<head>
<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Customize home screen title. -->
<meta name="apple-mobile-web-app-title" content="Web App">
<!-- Disable phone number detection. -->
<meta name="format-detection" content="telephone=no">
<!-- Set viewport. -->
<meta name="viewport" content="initial-scale=1">
<!-- Prevent text size adjustment on orientation change. -->
<style>html { -webkit-text-size-adjust: 100%; }</style>
<title>iOS 7 Web App</title>
<!-- Icons -->
<!-- iOS 7 iPad (retina) -->
<link href="/static/images/apple-touch-icon-152x152.png"
sizes="152x152"
rel="apple-touch-icon">
<!-- iOS 6 iPad (retina) -->
<link href="/static/images/apple-touch-icon-144x144.png"
sizes="144x144"
rel="apple-touch-icon">
<!-- iOS 7 iPhone (retina) -->
<link href="/static/images/apple-touch-icon-120x120.png"
sizes="120x120"
rel="apple-touch-icon">
<!-- iOS 6 iPhone (retina) -->
<link href="/static/images/apple-touch-icon-114x114.png"
sizes="114x114"
rel="apple-touch-icon">
<!-- iOS 7 iPad -->
<link href="/static/images/apple-touch-icon-76x76.png"
sizes="76x76"
rel="apple-touch-icon">
<!-- iOS 6 iPad -->
<link href="/static/images/apple-touch-icon-72x72.png"
sizes="72x72"
rel="apple-touch-icon">
<!-- iOS 6 iPhone -->
<link href="/static/images/apple-touch-icon-57x57.png"
sizes="57x57"
rel="apple-touch-icon">
<!-- Startup images -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="/static/images/apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="/static/images/apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="/static/images/apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="/static/images/apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="/static/images/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="/static/images/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="/static/images/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
</head>
<body>
<h1>iOS 7 Web app</h1>
<p>Add this page to your home screen or <a href="https://gist.github.com/tfausak/2222823">view its source</a>.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment