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

正常情况下，当你用手机浏览器打开网页时，导航就停留在上面，这样实际展示的屏幕就变小了。
那能不能加载后，屏幕就自动全屏呢？这就是本文要讨论的。

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代码里增加一些必要数据：复制代码代码如下:
<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 -->
<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" />
全屏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方法。

iphone的safari浏览器中实现全屏浏览的方法相关推荐

iphone的Safari浏览器中HTML5上传图片方向问题解决方法
前段时间在上传图片的时候前端使用FileReader将图片读到内存,使用canvas进行压缩,然后上传,在安卓手机上没有问题,但是在iphone的Safari浏览器中一直存在图片方向不正的问题,经过多 ...
微信浏览器中的全屏异常、应用切换异常问题探究
现象在微信浏览器中,有两种情况容易引发异常: 1.微信浏览器中某一个元素处于全屏时,这时微信出现弹窗:2.微信浏览器某一个元素处于全屏时,切换到其他应用,微信后台运行一段时间再切回来: 这时我们的页 ...
Mac电脑使用：删除保存在Mac电脑自带的Safari浏览器、谷歌浏览器、火狐浏览器中的账号和密码的方法
掌握删除保存在浏览器中的账号和密码的方法很重要,尤其是你在公司电脑上面存储的密码,万一哪天你离职了,一定要清理电脑浏览器上面存储的各种关于你自己的账号密码,如果不清理就会被别人使用,所以如果不是你私人 ...
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放关键代码 webkit-playsinline='true' playsinline= ...
html5 safari浏览器全屏显示隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作，也...
我想打一个div容器全屏等最新的iPhone,它在所有桌面浏览器和Android浏览器,但在iPhone浏览器(Safari浏览器)工作正常,它不管用.HTML5全屏API不IPhone SE Saf ...
怎样在iPhone、iPad上的Safari浏览器中快速关闭所有标签页？
Safari 是 iPhone 上使用最广泛的网络浏览器,可以在 iPhone 和 iPad 上的 Safari 中轻松打开额外的标签页,也可以一次关闭所有标签页.如何快速做到这一点,而不必一一关闭它 ...
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法参考文章: (1)JS IOS/iPhone的Safari浏览器不兼容Javascript中的D ...
解决ios系统在safari浏览器中添加web应用程序到主屏幕，打开子链接会跳转到safari的问题
解决ios系统在safari浏览器中添加web应用程序到主屏幕,打开子链接会跳转到safari的问题前言 ios系统的safari浏览器有一个功能可以将web应用程序添加到主程序,使得web程序像a ...
手机safari导入html书签,iPhone手机Safari浏览器书签如何同步至电脑?
如果在 Safari 中添加了很多书签,想要把它们全部同步到电脑浏览器上,逐一手动添加并不是什么好方法.对于 Mac 电脑,登录同一 Apple ID 并开启同步,就可以实现自动同步 Safari 书 ...

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

iphone的safari浏览器中实现全屏浏览的方法相关推荐

最新文章

热门文章