快捷導(dǎo)航

iphone的safari瀏覽器中實(shí)現(xiàn)全屏瀏覽的方法

更新時(shí)間：2014年06月03日 08:46:15 作者：

這篇文章主要介紹了iphone的safari瀏覽器中實(shí)現(xiàn)全屏瀏覽的方法,同時(shí)介紹了Add to Home Screen功能的實(shí)現(xiàn)方法,需要的朋友可以參考下

正常情況下，當(dāng)你用手機(jī)瀏覽器打開網(wǎng)頁時(shí)，導(dǎo)航就停留在上面，這樣實(shí)際展示的屏幕就變小了。
那能不能加載后，屏幕就自動(dòng)全屏呢？這就是本文要討論的。

Add to Home Screen

說到全屏不得不談iPhone下的safari有一個(gè)特別且重要的功能就是“Add to Home Screen”。（就在Safari瀏覽器最下方，最中間的那個(gè)位置，點(diǎn)擊選擇即可）
這個(gè)功能類似于把網(wǎng)頁地址作為一個(gè)超鏈接的方式放到手機(jī)桌面，并且可以直接訪問。不過要注意的是每個(gè)鏈接都需要js進(jìn)行一次特殊處理，那就是監(jiān)聽頁面點(diǎn)擊事件，如果是鏈接，則使用window.location = this.href;，這樣頁面就不會(huì)從當(dāng)前的本地窗口跳到瀏覽器了。
那我們看看具體代碼是怎么處理的。
其實(shí)只需要在HEAD代碼里增加一些必要數(shù)據(jù)：

復(fù)制代碼代碼如下:

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- home screen app 全屏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 狀態(tài)欄 -->
<!-- 還需要額外設(shè)置不同尺寸的啟動(dòng)圖，默認(rèn)不設(shè)置的話會(huì)自動(dòng)去尋找根目錄下的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啟動(dòng)圖 -->
<link rel="apple-touch-startup-image" href="startup/startup5.png" media="(device-height:568px)">
<!-- iPhone4啟動(dòng)圖 -->
<link rel="apple-touch-startup-image" size="640x920" href="startup/startup.png" media="(device-height:480px)">

還想了解具體的設(shè)置可以參考蘋果的官網(wǎng)說明：Configuring Web Applications
當(dāng)然，對(duì)啟動(dòng)圖，我推薦的做法是只使用一張114*114的圖片即可。即：

復(fù)制代碼代碼如下:

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

全屏js代碼

復(fù)制代碼代碼如下:

window.addEventListener('DOMContentLoaded', function() {
    var page = document.getElementById('page'),
        nav = window.navigator,
        ua = nav.userAgent,
        isFullScreen = nav.standalone;

    if (ua.indexOf('Android') !== -1) {
        // 56對(duì)應(yīng)的是Android Browser導(dǎo)航欄的高度
        page.style.height = window.innerHeight + 56 + 'px';
    } else if (/iPhone|iPod|iPad/.test(ua)) {
        // 60對(duì)應(yīng)的是Safari導(dǎo)航欄的高度
        page.style.height = window.innerHeight + (isFullScreen ? 0 : 60) + 'px'
    }
    setTimeout(scrollTo, 0, 0, 1);
}, false);

這段代碼本質(zhì)上就是當(dāng)前窗口的高度 + 導(dǎo)航欄的高度獲取到真實(shí)的屏幕高度。最后再調(diào)用scrollTo方法。

您可能感興趣的文章: