手机
当前位置:查字典教程网 >编程开发 >IOS开发 >iphone的safari浏览器中实现全屏浏览的方法
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" /><>

<meta name="apple-mobile-web-app-status-bar-style" content="black" /><>

<>

<>

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="startup/apple-touch-icon-57x57-precomposed.png" />

<>

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="startup/apple-touch-icon-72x72-precomposed.png" />

<>

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

<>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="startup/apple-touch-icon-144x144-precomposed.png" />

<>

<link rel="apple-touch-startup-image" href="startup/startup5.png" media="(device-height:568px)">

<>

<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方法。

【iphone的safari浏览器中实现全屏浏览的方法】相关文章:

详解iOS开发中使用storyboard创建导航控制器的方法

iOS实现选项卡效果的方法

iOS Xcode8更新后输出log日志关闭的方法

使用UITextField限制只可输入中,英文,数字的方法

iOS应用中发送HTTP的get请求以及HTTP异步请求的方法

详解Obejective-C中将JSON数据转为模型的方法

iOS开发中实现hook消息机制的方法探究

iOS自定义button抖动效果并实现右上角删除按钮

解析iOS应用的UI开发中懒加载和xib的简单使用方法

iOS中修改UITextField占位符字体颜色的方法总结

精品推荐
分类导航