iphone的safari浏览器中实现全屏浏览的方法 iphone的safari浏览器怎么全屏 |
您所在的位置:网站首页 › 苹果网页全屏快捷键 › iphone的safari浏览器中实现全屏浏览的方法 iphone的safari浏览器怎么全屏 |
正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了。CcX蔡甸网 - 蔡甸区第一新闻门户网站 那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的。CcX蔡甸网 - 蔡甸区第一新闻门户网站 Add to Home ScreenCcX蔡甸网 - 蔡甸区第一新闻门户网站 说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是“Add to Home Screen”。(就在Safari浏览器最下方,最中间的那个位置,点击选择即可)CcX蔡甸网 - 蔡甸区第一新闻门户网站 这个功能类似于把网页地址作为一个超链接的方式放到手机桌面,并且可以直接访问。不过要注意的是每个链接都需要js进行一次特殊处理,那就是监听页面点击事件,如果是链接,则使用window.location = this.href;,这样页面就不会从当前的本地窗口跳到浏览器了。CcX蔡甸网 - 蔡甸区第一新闻门户网站 那我们看看具体代码是怎么处理的。CcX蔡甸网 - 蔡甸区第一新闻门户网站 其实只需要在HEAD代码里增加一些必要数据:CcX蔡甸网 - 蔡甸区第一新闻门户网站 复制代码 代码如下:CcX蔡甸网 - 蔡甸区第一新闻门户网站 CcX蔡甸网 - 蔡甸区第一新闻门户网站 还想了解具体的设置可以参考苹果的官网说明:Configuring Web ApplicationsCcX蔡甸网 - 蔡甸区第一新闻门户网站 当然,对启动图,我推荐的做法是只使用一张114*114的图片即可。即:CcX蔡甸网 - 蔡甸区第一新闻门户网站 复制代码 代码如下:CcX蔡甸网 - 蔡甸区第一新闻门户网站 还想了解具体的设置可以参考苹果的官网说明:Configuring Web ApplicationsCcX蔡甸网 - 蔡甸区第一新闻门户网站 当然,对启动图,我推荐的做法是只使用一张114*114的图片即可。即:CcX蔡甸网 - 蔡甸区第一新闻门户网站 复制代码 代码如下:CcX蔡甸网 - 蔡甸区第一新闻门户网站 window.addEventListener('DOMContentLoaded', function() {CcX蔡甸网 - 蔡甸区第一新闻门户网站 var page = document.getElementById('page'),CcX蔡甸网 - 蔡甸区第一新闻门户网站 nav = window.navigator,CcX蔡甸网 - 蔡甸区第一新闻门户网站 ua = nav.userAgent,CcX蔡甸网 - 蔡甸区第一新闻门户网站 isFullScreen = nav.standalone;CcX蔡甸网 - 蔡甸区第一新闻门户网站 if (ua.indexOf('Android') !== -1) {CcX蔡甸网 - 蔡甸区第一新闻门户网站 // 56对应的是Android Browser导航栏的高度CcX蔡甸网 - 蔡甸区第一新闻门户网站 page.style.height = window.innerHeight + 56 + 'px';CcX蔡甸网 - 蔡甸区第一新闻门户网站 } else if (/iPhone|iPod|iPad/.test(ua)) {CcX蔡甸网 - 蔡甸区第一新闻门户网站 // 60对应的是Safari导航栏的高度CcX蔡甸网 - 蔡甸区第一新闻门户网站 page.style.height = window.innerHeight + (isFullScreen ? 0 : 60) + 'px'CcX蔡甸网 - 蔡甸区第一新闻门户网站 }CcX蔡甸网 - 蔡甸区第一新闻门户网站 setTimeout(scrollTo, 0, 0, 1);CcX蔡甸网 - 蔡甸区第一新闻门户网站 }, false);CcX蔡甸网 - 蔡甸区第一新闻门户网站 这段代码本质上就是当前窗口的高度 + 导航栏的高度 获取到真实的屏幕高度。最后再调用scrollTo方法。CcX蔡甸网 - 蔡甸区第一新闻门户网站 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |