erning/safari-mobile-note.md

## safari-mobile-note.md

      
    Raw
  

              safari-mobile-note.md
            
          
    iOS Developing Web Content for Safari
缺省图标

在 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://user@example.com
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">