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
- Google Nexus 7
- -webkit-min-device-pixel-ratio为1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
- -webkit-min-device-pixel-ratio为2.0
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- 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——决定用户是否能缩放页面。
参考资料: