iphone的safari浏览器中实现全屏浏览的⽅法
正常情况下，当你⽤⼿机浏览器打开⽹页时，导航就停留在上⾯，这样实际展⽰的屏幕就变⼩了。
那能不能加载后，屏幕就⾃动全屏呢？这就是本⽂要讨论的。
说到全屏不得不谈iPhone下的safari有⼀个特别且重要的功能就是“Add to Home Screen”。（就在Safari浏览器最下⽅，最中间的那个位置，点击选择即可）
这个功能类似于把⽹页地址作为⼀个超链接的⽅式放到⼿机桌⾯，并且可以直接访问。不过要注意的是每个链接都需要js进⾏⼀次特殊处理，那就是监听页⾯点击事件，如果是链接，则使⽤window.location = this.href;，这样页⾯就不会从当前的本地窗⼝跳到浏览器了。
那我们看看具体代码是怎么处理的。
其实只需要在HEAD代码⾥增加⼀些必要数据：
复制代码代码如下:
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- home screen app 全屏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 状态栏 -->
<!-- 还需要额外设置不同尺⼨的启动图，默认不设置的话会⾃动去寻根⽬录下的apple-touch-icon-precomposed.png -->
<!-- home screen app iPhone icon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="startup/apple-touch-icon-57x57-precomposed.png" />
<!-- home screen app iPad icon -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="startup/apple-touch-icon-72x72-precomposed.png" />
<!-- home screen app iPhone Retinas icon -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="startup/apple-touch-icon-114x114-precomposed.png" /> <!-- home screen app iPad Retinas icon -->tablet screen
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="startup/apple-touch-icon-144x144-precomposed.png" /> <!-- iPhone5启动图 -->
<link rel="apple-touch-startup-image" href="startup/startup5.png" media="(device-height:568px)">
<!-- iPhone4启动图 -->
<link rel="apple-touch-startup-image" size="640x920" href="startup/startup.png" media="(device-height:480px)">
还想了解具体的设置可以参考苹果的官⽹说明：Configuring Web Applications
当然，对启动图，我推荐的做法是只使⽤⼀张114*114的图⽚即可。即：
复制代码代码如下:
<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />
复制代码代码如下:
window.addEventListener('DOMContentLoaded', function() {
var page = ElementById('page'),
nav = window.navigator,
ua = nav.userAgent,
isFullScreen = nav.standalone;
if (ua.indexOf('Android') !== -1) {
// 56对应的是Android Browser导航栏的⾼度
page.style.height = window.innerHeight + 56 + 'px';
} else if (/iPhone|iPod|iPad/.test(ua)) {
// 60对应的是Safari导航栏的⾼度
page.style.height = window.innerHeight + (isFullScreen ? 0 : 60) + 'px'
}
setTimeout(scrollTo, 0, 0, 1);
}, false);
这段代码本质上就是当前窗⼝的⾼度 + 导航栏的⾼度获取到真实的屏幕⾼度。最后再调⽤scrollTo⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。