正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。 那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。
Add to Home Screen
说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是“Add to Home Screen”。（就在Safari浏览器最下方，最中间的那个位置，点击选择即可） 这个功能类似于把网页地址作为一个超链接的方式放到手机桌面，并且可以直接访问。不过要注意的是每个链接都需要js进行一次特殊处理，那就是监听页面点击事件，如果是链接，则使用window.location = this.href;，这样页面就不会从当前的本地窗口跳到浏览器了。 那我们看看具体代码是怎么处理的。 其实只需要在HEAD代码里增加一些必要数据：
正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。
那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。
Add to Home Screen
说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是“Add to Home Screen”。（就在Safari浏览器最下方，最中间的那个位置，点击选择即可）
这个功能类似于把网页地址作为一个超链接的方式放到手机桌面，并且可以直接访问。不过要注意的是每个链接都需要js进行一次特殊处理，那就是监听页面点击事件，如果是链接，则使用window.location = this.href;，这样页面就不会从当前的本地窗口跳到浏览器了。
那我们看看具体代码是怎么处理的。
其实只需要在HEAD代码里增加一些必要数据：
复制代码代码如下:
还想了解具体的设置可以参考苹果的官网说明：Configuring Web Applications
当然，对启动图，我推荐的做法是只使用一张114*114的图片即可。即：
复制代码代码如下:
全屏js代码
复制代码代码如下:
window.addEventListener('DOMContentLoaded', function() {
var page = document.getElementById('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方法。
还想了解具体的设置可以参考苹果的官网说明：Configuring Web Applications 当然，对启动图，我推荐的做法是只使用一张114*114的图片即可。即：
复制代码代码如下:
全屏js代码
复制代码代码如下:
window.addEventListener('DOMContentLoaded', function() { var page = document.getElementById('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方法。