-
-
Save hal0gen/5852bd9db240c477f20c to your computer and use it in GitHub Desktop.
iOS + Android settings for web applications
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!-- Adapted from https://gist.github.com/tfausak/2222823 --> | |
| <html> | |
| <head> | |
| <title>Mobile-ready web app</title> | |
| <!-- CONFIGURATION --> | |
| <!-- Allow web app to be run in full-screen mode - iOS. --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- Allow web app to be run in full-screen mode - Android. --> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <!-- Make the app title different than the page title - iOS. --> | |
| <meta name="apple-mobile-web-app-title" content="Mobile web app title"> | |
| <!-- Make the app title different than the page title and configure icons - Android. --> | |
| <link rel="manifest" href="/manifest.json"> | |
| <!-- IE configuration for icons and colors is in browserconfig.xml --> | |
| <!-- Configure the status bar - iOS. --> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <!-- Set the viewport. --> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui"> | |
| <!-- Disable automatic phone number detection. --> | |
| <meta name="format-detection" content="telephone=no"> | |
| <!-- ICONS --> | |
| <!-- iOS icons --> | |
| <link rel="apple-touch-icon" sizes="57x57" href="/icon-57x57.png"> | |
| <link rel="apple-touch-icon" sizes="60x60" href="/icon-60x60.png"> | |
| <link rel="apple-touch-icon" sizes="72x72" href="/icon-72x72.png"> | |
| <link rel="apple-touch-icon" sizes="76x76" href="/icon-76x76.png"> | |
| <link rel="apple-touch-icon" sizes="114x114" href="/icon-114x114.png"> | |
| <link rel="apple-touch-icon" sizes="120x120" href="/icon-120x120.png"> | |
| <link rel="apple-touch-icon" sizes="144x144" href="/icon-144x144.png"> | |
| <link rel="apple-touch-icon" sizes="152x152" href="/icon-152x152.png"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png"> | |
| <!-- Android icons --> | |
| <link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="96x96" href="/icon-96x96.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png"> | |
| <!-- Windows icons --> | |
| <meta name="msapplication-TileImage" content="/icon-144x144.png"> | |
| <!-- Windows dock color --> | |
| <meta name="msapplication-TileColor" content="#fff"> | |
| <!-- Android dock color --> | |
| <meta name="theme-color" content="#fff"> | |
| <!-- STARTUP IMAGES - iOS only --> | |
| <!-- iPad retina portrait startup image --> | |
| <link href="/splash-1536x2008.jpg" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: portrait)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad retina landscape startup image --> | |
| <link href="/splash-1496x2048.jpg" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: landscape)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad non-retina portrait startup image --> | |
| <link href="/splash-768x1004.jpg" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 1) | |
| and (orientation: portrait)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad non-retina landscape startup image --> | |
| <link href="/splash-748x1024.jpg" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 1) | |
| and (orientation: landscape)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 6 Plus portrait startup image --> | |
| <link href="/splash-1242x2148.jpg" | |
| media="(device-width: 414px) and (device-height: 736px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 6 Plus landscape startup image --> | |
| <link href="/splash-1182x2208.jpg" | |
| media="(device-width: 414px) and (device-height: 736px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 6 startup image --> | |
| <link href="/splash-750x1294.jpg" | |
| media="(device-width: 375px) and (device-height: 667px) | |
| and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 5 startup image --> | |
| <link href="/splash-640x1096.jpg" | |
| media="(device-width: 320px) and (device-height: 568px) | |
| and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone < 5 retina startup image --> | |
| <link href="/splash-640x920.jpg" | |
| media="(device-width: 320px) and (device-height: 480px) | |
| and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone < 5 non-retina startup image --> | |
| <link href="/splash-320x460.jpg" | |
| media="(device-width: 320px) and (device-height: 480px) | |
| and (-webkit-device-pixel-ratio: 1)" | |
| rel="apple-touch-startup-image"> | |
| </head> | |
| <body> | |
| <h1>Mobile-ready web app</h1> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8"?> | |
| <browserconfig><msapplication><tile><square70x70logo src="/icon-70x70.png"/><square150x150logo src="/icon-150x150.png"/><square310x310logo src="/icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "Mobile web app", | |
| "icons": [ | |
| { | |
| "src": "\/icon-36x36.png", | |
| "sizes": "36x36", | |
| "type": "image\/png", | |
| "density": "0.75" | |
| }, | |
| { | |
| "src": "\/icon-48x48.png", | |
| "sizes": "48x48", | |
| "type": "image\/png", | |
| "density": "1.0" | |
| }, | |
| { | |
| "src": "\/icon-72x72.png", | |
| "sizes": "72x72", | |
| "type": "image\/png", | |
| "density": "1.5" | |
| }, | |
| { | |
| "src": "\/icon-96x96.png", | |
| "sizes": "96x96", | |
| "type": "image\/png", | |
| "density": "2.0" | |
| }, | |
| { | |
| "src": "\/icon-144x144.png", | |
| "sizes": "144x144", | |
| "type": "image\/png", | |
| "density": "3.0" | |
| }, | |
| { | |
| "src": "\/icon-192x192.png", | |
| "sizes": "192x192", | |
| "type": "image\/png", | |
| "density": "4.0" | |
| } | |
| ] | |
| } |
Nice one
Perfect, thanks!
Very helpful. Thanks!
Thanks!
Bạn là một nguồn năng lượng tốt đến mọi người, và nó thật tuyệt vời
Very useful, thanks :)
<meta name="mobile-web-app-capable" content="yes"> stopped working for me on android chrome
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for this!