iphone webapp

App 图标 （apple-touch-icon可以指定sizes来告诉设备该使用哪个图片）
苹果从IOS4.2开始mobile safari就开始支持把网页保存至主屏，从而使得用户可以方便的从主屏的快捷方式进入webapp，而通过苹果提供给我们的API我们可以使得 webapp 像原生app 一样拥有自己的icon。

<linkrel="apple-touch-icon"href="/custom_icon.png"/>
<linkrel="apple-touch-icon"href="touch-icon-iphone.png"/>
<linkrel="apple-touch-icon"sizes="72x72"href="touch-icon-ipad.png"/>
<linkrel="apple-touch-icon"sizes="114x114"href="touch-icon-iphone4.png"/>

对于多设备的多分辨率，苹果提供了sizes这个属性。如果不指定这个属性，默认 sizes 会是57 * 57。
对应 apple-touch-icon 苹果还有另外一个属性 apple-touch-icon-precomposed ，他们的不同之处在于使用 apple-touch-icon-precomposed 属性的时候，苹果不会给桌面图标加一个高光效果。

可以在iPhone/iPod Touch上将网页"添加至主屏幕"时，去掉icon上那恶心的透明层．代码如下：

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon57.png"> 

App StartUp Image（apple-touch-startup-image 不可以指定sizes来告诉设备该使用哪个图片， 所以使用media 来判断）
苹果 IOS 3.0以后就支持 Startup Image 属性，webapp 在苹果手机上可以给网页指定StartUp Image，使得当webapp从主屏打开时，设为StartUp的封面图片会首先出现，类似原生app。但是苹果对于指定的图片有些限制，必须满足大小。对于 iphone 和 itouch 图片的尺寸只能是 320 x 460 ，其他大小的都无效。但是你可以通过media  来进行多设备适配。

<link rel="apple-touch-startup-image" media="(device-width: 320px) and not (-webkit-min-device-pixel-ratio: 2) and (device-height: 480px)" href="images/bg320_460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (device-height: 480px)" href="images/bg640_920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (device-height: 568px)" href="images/bg640_1096.png">

device-width 设备的屏幕可见宽度 本特性接受min和max前缀，因此可以派生出min-device-width和max-device-width两个媒体特性。

device-height设备的屏幕可见高度

-webkit-min-device-pixel-ratio

• -webkit-min-device-pixel-ratio为1.3

1. Google Nexus 7

 

• -webkit-min-device-pixel-ratio为1.5

1. Google Nexus S 
2. Samsung Galaxy S II 
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S 
6. HTC Velocity
7. HTC Sensation 

 

• -webkit-min-device-pixel-ratio为2.0

1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 所有Retina displays 的MAC
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. HTC One X    

Web App运行起来要像Native App，那么就要去掉Safari的一些默认控件，比如地址栏、状态栏之类的。

<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 地址栏和屏幕底下的操作菜单隐藏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 状态栏变黑色-->
<meta name="format-detection" content="telephone=no"> <!--禁用自动检测在网页中可能出现的电话号码-->
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">

 

注：在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效；

viewport并非Safari的私有属性，width用于指定宽度，initial-scale指定初始化的缩略比例，minimum-scale指定缩小的比例，而maximum-scale则是放大的比例，当然这些缩放都取决于user-scalable——决定用户是否能缩放页面。

参考资料：

苹果官方开发者网站关于webapp的配置

 

 

转载于:https://www.cnblogs.com/liulanghu/p/3613236.html