cdade05315
* Include just one 180x180px touch icon`. Over time as Apple released different size displays for their devices, the requirements¹ for the size of the touch icon have changed quite a bit: * 57×57px – iPhone with @1x display and iPod Touch * 72×72px – iPad and iPad mini with @1x display running iOS ≤ 6 * 76×76px – iPad and iPad mini with @1x display running iOS ≥ 7 * 114×114px – iPhone with @2x display running iOS ≤ 6 * 120×120px – iPhone with @2x and @3x display running iOS ≥ 7 * 144×144px – iPad and iPad mini with @2x display running iOS ≤ 6 * 152×152px – iPad and iPad mini with @2x display running iOS 7 * 180×180px – iPad and iPad mini with @2x display running iOS 8+ However, most iOS users will be on the latest 2 versions² of iOS and using newer devices, so nowadays, one 180x180px touch icon is enough. Also, if needed, the icon will be automatically³ downscaled by Safari, and the result of the scaling is generally ok. * Remove unneeded `sizes` attribute. When using only one touch icon there is no need to use the `sizes` attribute. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ¹ https://github.com/h5bp/html5-boilerplate/pull/1599#issuecomment-56384135 ² https://developer.apple.com/support/app-store/ ³ https://realfavicongenerator.net/blog/how-ios-scales-the-apple-touch-icon/ See also: https://mathiasbynens.be/notes/touch-icons
60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset='utf-8' >
|
|
<meta name="viewport" content="width=device-width, viewport-fit=cover">
|
|
<meta id='theThemeColor' name='theme-color' content='#4169e1' >
|
|
<meta name="description" content="An alternative web client for Mastodon, focused on speed and simplicity." >
|
|
|
|
%sapper.base%
|
|
|
|
<link id='theManifest' rel='manifest' href='/manifest.json' >
|
|
<link id='theFavicon' rel='icon' type='image/png' href='/favicon.png' >
|
|
<link rel="apple-touch-icon" href="/apple-icon.png" >
|
|
<meta name="mobile-web-app-capable" content="yes" >
|
|
<meta name="apple-mobile-web-app-title" content="Pinafore" >
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="white" >
|
|
|
|
<!-- inline CSS -->
|
|
|
|
<noscript>
|
|
<style>
|
|
.hidden-from-ssr {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
|
|
<!-- Sapper generates a <style> tag containing critical CSS
|
|
for the current page. CSS for the rest of the src is
|
|
lazily loaded when it precaches secondary pages -->
|
|
%sapper.styles%
|
|
|
|
<!-- This contains the contents of the <:Head> component, if
|
|
the current page has one -->
|
|
%sapper.head%
|
|
</head>
|
|
<body>
|
|
<!-- inline JS -->
|
|
|
|
<!-- The application will be rendered inside this element,
|
|
because `templates/client.js` references it -->
|
|
<div id='sapper'>%sapper.html%</div>
|
|
|
|
<!-- Toast.html gets rendered here -->
|
|
<div id="theToast"></div>
|
|
|
|
<!-- Snackbar.html gets rendered here -->
|
|
<div id="theSnackbar"></div>
|
|
|
|
<!-- LoadingMask.html gets rendered here -->
|
|
<div id="loading-mask" aria-hidden="true"></div>
|
|
|
|
<!-- inline SVG -->
|
|
|
|
<!-- Sapper creates a <script> tag containing `templates/client.js`
|
|
and anything else it needs to hydrate the src and
|
|
initialise the router -->
|
|
%sapper.scripts%
|
|
</body>
|
|
</html>
|