iphone的safari浏览器中实现全屏浏览的方法
正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了。
那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的。
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方法。
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
-
-
-
-
-
-
hdu 4080
题目这题是第一次二分+哈希,其实跟一开始想的差不多,没有仔细看数据范围,只要用map出存每种长度的字符串出现的次...
[阅读全文]
-
-
-
最大流
题目1:Dining POJ - 3281分析:模板(当前弧优化+剪枝)代码:#include <cstd...
[阅读全文]
网友评论