iphone的safari浏览器中实现全屏浏览的方法

iphone的的safari浏览器中实现全屏浏览的方法浏览器中实现全屏浏览的方法

主要介绍了iphone的safari浏览器中实现全屏浏览的方法,同时介绍了Add to Home Screen功能的实现方法,需要

的朋友可以参考下

正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。

那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。

Add to Home Screen

说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是“Add to Home Screen”。（就在Safari浏览器最下方，最中

间的那个位置，点击选择即可）

<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 -->

当然，对启动图，我推荐的做法是只使用一张114*114的图片即可。即：

复制代码 代码如下:

<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />

全屏全屏js代码代码

复制代码 代码如下:

window.addEventListener('DOMContentLoaded', function() {

var page = document.getElementById('page'),

nav = window.navigator,

ua = nav.userAgent,

isFullScreen = nav.standalone;

}

setTimeout(scrollTo, 0, 0, 1);

}, false);

这段代码本质上就是当前窗口的高度 + 导航栏的高度 获取到真实的屏幕高度。最后再调用scrollTo方法。