Skip to content

Instantly share code, notes, and snippets.

@mattbontrager

mattbontrager/WebApp-Document-Head.html

Last active May 5, 2023 16:48
Show Gist options
  • Save mattbontrager/5732573 to your computer and use it in GitHub Desktop.
Save mattbontrager/5732573 to your computer and use it in GitHub Desktop.
Download ZIP
Typically required meta tags, icons, startup images, stylesheets, etc. for Mobile Web Apps.
Raw
WebApp-Document-Head.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- this viewport meta tag configures the mobile device viewport behavior -->
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- this meta tag enables the web site to become a mobile web app (iDevices). See also: navigator.standalone -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="author" content="@mattbontrager" />
<meta name="description" content="APP DESCRIPTION GOES HERE">
<title>SITE/APP TITLE GOES HERE</title>
<!--
this link will direct the browser to download and use this image as your app 'icon'.
the device is smart enough to know which icon to use if you configure these tags this way
-->
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6s-and-6-plus.png" />
<!--
pretty much the same story for these here, except that these are the images that will
be displayed when your web 'app' is launching. it mimics the native app behavior exactly
-->
<link rel="apple-touch-startup-image" href="/iphone5-startup-640x1136.png" />
<link rel="apple-touch-startup-image" href="/iphone6-portrait-startup-750x1334.png" />
<link rel="apple-touch-startup-image" href="/iphone6-landscape-startup-1334x750.png" />
<link rel="apple-touch-startup-image" href="/iphone6Plus-portrait-startup-1242x2208.png" />
<link rel="apple-touch-startup-image" href="/iphone6Plus-landscape-startup-2208x1242.png" />
<!-- finally load your stylesheets -->
<link rel="stylesheet" href="css/screen.css" media="screen" />
</head>
<body>
<header>
<h3 class="center">I'm a site header</h3>
</header>
<nav>
<ul>
<li>
<button class="nav-button">nav button 1</button>
</li>
<li>
<button class="nav-button">nav button 2</button>
</li>
<li>
<button class="nav-button">nav button 3</button>
</li>
</ul>
</nav>
<main>
<article>
<header>Article Header</header>
<section id="section-1" class="readme">
<h3>Section One Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam suscipit ducimus saepe ipsa quo itaque eaque in debitis rerum numquam?</p>
</section>
<section id="section-2" class="readme">
<h3>Section Two Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam qui dolorum ipsum, inventore eum facere accusamus cumque temporibus adipisci, ea.</p>
</section>
<aside>
<h5>Tidbits of Info</h5>
<figure>
<img src="images/whatever.jpg" alt="Whatever you want">
<figcaption>Lorem ipsum dolor <a href="http://html5doctor.com/the-figure-figcaption-elements/">sit amet</a>.</figcaption>
</figure>
</aside>
<footer>
<ul>
<li class="footer-bar">Left Side Footer</li>
<li class="footer-bar">Center Footer</li>
<li class="footer-bar">Right Side Footer</li>
</ul>
</footer>
</article>
</main>
<footer>
<h5>I'm a site footer!</h5>
</footer>
<script src="js/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment