iOS Web Application

缺省图标

在 htdocs 目录下放置：/apple-touch-icon.png

页面中设置图标

在 HTML 文档中设置

<link rel="apple-touch-icon" href="/custom_icon.png">

不同尺寸

<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">

缺省尺寸为 60x60，其他参考 Icon and Image Sizes

启动画面

<link rel="apple-touch-startup-image" href="/startup.png">

On iPhone and iPod touch, the image must be 320 x 480 pixels and in portrait orientation

缺省使用该页面上一次使用时的截屏图片。

隐藏浏览器界面

先设置 standalone 模式，再关闭状态栏

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property

链接

mailto:
tel:
facetime:
facetime://[email protected]
sms:1-408-555-1212


关闭电话号码自动检测

```html
<meta name = "format-detection" content = "telephone=no">

CSS

to specify a style sheet for iPhone and iPod touch, use an expression similar to the following:

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet">

To specify a style sheet for devices other than iOS, use an expression similar to the following:

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

To load styles intended for users with Retina displays only, use an expression similar to the following:

<link media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="retina.css" type="text/css" rel="stylesheet">

Alternatively, you can use this format inside a CSS block in an HTML file, or in an external CSS file:

@media screen and (min-device-width: 481px) { ... }
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Viewport

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

Smart App Banner

下载应用或者打开应用

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Storing Data on the Client

Sample mainfest

CACHE MANIFEST
 
demoimages/clownfish.jpg
demoimages/clownfishsmall.jpg
demoimages/flowingrock.jpg
demoimages/flowingrocksmall.jpg
demoimages/stones.jpg
demoimages/stonessmall.jpg

It must be served with type text/cache-manifest. The first line must contain the text CACHE MANIFEST.

<html manifest="demo.manifest">

erning/safari-mobile-note.md