1.删除默认的苹果工具栏和菜单栏
<meta content="no" name="apple-mobile-web-app-capable">
需要显示工具栏和菜单栏时,不需要添加,默认值为no,即正常显示。如果content设置为yes,Web应用会以全屏模式运行,可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
2.<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
3.兼容移动端设备
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释:
width = device-width:宽度等于当前设备的宽度
height = device-height:高度等于当前设备的高度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)