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

2016-02-19 11:27 323 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享iphone的safari浏览器中实现全屏浏览的方法教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - 编程语言 】

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/bianchengyuyan/)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/bianchengyuyan/)

来源:http://www.tulaoshi.com/n/20160219/1597561.html

延伸阅读
标签: 浏览器
如何全屏打开IE浏览器   1、普通情况下,按F11键就能实现简单的全屏模式。这种模式开启的话,会隐藏菜单栏。使得页面看起来就大一点。有没有方法能将其他的比如说地址栏、工具栏、标签栏通通弄消失呢?那就要使用下面这个方法了。 2、我们使用快捷键win+r打开运行,在里面输入iexplore -k(不包括引号)。这种模式是真正的全屏...
手机百度浏览器如何全屏浏览   1.进入百度浏览器,点击底栏 2.向左滑动打开下一页面 3.选择,快完成了啦!! 4.全屏功能开启后,你以后浏览都会是全屏的。不用给小编说谢谢,哈哈!!
标签: 浏览器
Firefox和Safari浏览器哪个好 火狐浏览器 火狐浏览器(Mozilla Firefox)是由Mozilla开发的网页浏览器,采用Gecko网页排版引擎,支持多种操作系统,开放源代码以多许可方式授权,包括Mozilla公共许可证(MPL)、GNU通用公共授权条款(GPL)以及GNU较宽松公共许可证(LGPL),目标是要创造一个开放,创新与机遇的网络环境。 第三方插...
手机QQ浏览器退出全屏模式的方法介绍   为了获取更好地上网体验,我们在使用手机QQ浏览器时可能会选择全屏浏览,不过这样有时也不方便,那么手机QQ浏览器怎么退出全屏呢? 1.如图,在全屏模式下点击右下角 2.即可出现网址和底栏 3.若要完全退出全屏,则点击底栏中间标志 4.向左滑动,点击 5....
iphone如何快速访问Safari浏览器历史记录   在iPhone和iPad上的Safari是最好的移动浏览器之一。你不仅能拥有舒适的浏览体验,还能够将您感兴趣的网页同步到iCloud上等等。tulaoshi当它涉及到回顾历史记录时,你除了可以通过Safari常规方式浏览历史记录以外,实际上有一个更快的方式: 1.从你的iPhone或iPad的主屏幕启动Safari浏...

经验教程

375

收藏

46
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部