Skip to content

Instantly share code, notes, and snippets.

@mmansion

mmansion/ios_webclip.html

Forked from cgkio/ios_webclip.html
Created December 8, 2017 21:59
Download ZIP

Revisions

  1. Christian Kessler created this gist Sep 25, 2013.
    65 changes: 65 additions & 0 deletions ios_webclip.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <!-- 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:[email protected]">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:[email protected][email protected]&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/ -->