Skip to content

Instantly share code, notes, and snippets.

@joshbeckman

joshbeckman/tags.html

Created January 22, 2014 13:31
Show Gist options
  • Save joshbeckman/8558750 to your computer and use it in GitHub Desktop.
Save joshbeckman/8558750 to your computer and use it in GitHub Desktop.
Download ZIP
Meta/link tags necessary to make mobile devices correctly display responsive and mobile-optimized sites.
Raw
tags.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" /><!-- speak the same language -->
<meta content="width=device-width, initial-scale=1" name="viewport" /><!-- correctly relate screen size to CSS -->
<meta name="HandheldFriendly" content="true" /><!-- BlackBerry, please don't f*** with my page -->
<meta name="apple-mobile-web-app-capable" content="yes"><!-- iPhone save-to-home-screen-able -->
<link rel="icon" href="/images/favicon.png"><!-- bookmarking/favoriting image -->
<meta name="msapplication-TileColor" content="#ffffff"/><!-- Windows 8/Windows phone -->
<meta name="msapplication-TileImage" content="/images/favicon.png"/><!-- Windows 8/Windows phone -->
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" /><!-- iOS device bookmarking -->
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png" /><!-- iOS device bookmarking -->
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png" /><!-- iOS device bookmarking -->
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png" /><!-- iOS device bookmarking -->
<style type="text/css">
/* Depending on your page styles elsewhere, this may be
able to mitigate mobile Chrome font-boosting hell */
html * {max-height:1000000px;}
</style>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment