Skip to content

Instantly share code, notes, and snippets.

@cgkio
Created September 25, 2013 14:58
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save cgkio/6700866 to your computer and use it in GitHub Desktop.
Save cgkio/6700866 to your computer and use it in GitHub Desktop.
HTML/meta setting for an iOS web clip
<!-- Hiding Safari User Interface Components -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- to set the viewport width to the width of the device, add this to your HTML file: -->
<meta name="viewport" content="width=device-width">
<!-- to set the initial scale to 1.0, add this to your HTML file: -->
<meta name="viewport" content="initial-scale=1.0">
<!-- to set the initial scale and to turn off user scaling, add this to your HTML file: -->
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
<!-- specifying a webpage icon for web clip -->
<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" />
<!-- specifying a startup image -->
<link rel="apple-touch-startup-image" href="/startup.png">
<!-- changing the status bar appearance -->
<!-- If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- enables or disables automatic detection of possible phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- linking to other native apps -->
<!-- telephone -->
<a href="tel:1-408-555-5555">Call me</a>
<!-- email -->
<!-- the mailto scheme is used to launch the Mail application and open the email compose sheet. When specifying a mailto URL, you must provide the target email address. The following examples show strings formatted for Safari and for native iOS applications. -->
<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
<!-- you can also include a subject field, a message, and multiple recipients in the To, Cc, and Bcc fields. (In iOS, the from attribute is ignored.) The following example shows a mailto URL that includes several different attributes: -->
<a href="mailto:foo@example.com?cc=bar@example.com&subject=Greetings%20from%20Cupertino!&body=Wish%20you%20were%20here!">Click Here</a>
<!-- SMS -->
<a href="sms:1-408-555-1212">New SMS Message</a>
<!-- maps in native Maps app -->
<a href="http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>
<!-- Supported Apple Maps parameters
q= The query parameter. This parameter is treated as if it had been typed into the query box by the user in the Maps app. q=* is not supported
near= The location part of the query.
ll= The latitude and longitude points (in decimal format, comma separated, and in that order) for the map center point.
sll= The latitude and longitude points from which a business search should be performed.
spn= The approximate latitude and longitude span.
sspn= A custom latitude and longitude span format used by Apple.
t= The type of map to display.
z= The zoom level.
saddr= The source address, which is used when generating driving directions
daddr= The destination address, which is used when generating driving directions. -->
<!-- configuring automatic correction and capitalization with form fields -->
<input type="text" name="field1" autocorrect="on" />
<input type="text" name="field2" autocorrect="off" />
<!-- Create links for the iTunes Store, the App Store, the iBookstore, and the Mac App Store. -->
<!-- https://linkmaker.itunes.apple.com/us/ -->
<!-- src: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ -->
@R71il
Copy link

R71il commented Oct 24, 2023

Kkk

@HackerXYT
Copy link

Very helpful👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment