iphone的safari瀏覽器中實現全屏瀏覽的方法

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

正常情況下,當你用手機瀏覽器開啟網頁時,導航就停留在上面,這樣實際展示的螢幕就變小了。
那能不能載入後,螢幕就自動全屏呢?這就是本文要討論的。

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=”57×57″ href=”startup/apple-touch-icon-57×57-precomposed.png” />
<!– home screen app iPad icon –>
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”startup/apple-touch-icon-72×72-precomposed.png” />
<!– home screen app iPhone Retinas icon –>
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”startup/apple-touch-icon-114×114-precomposed.png” />
<!– home screen app iPad Retinas icon –>
<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”startup/apple-touch-icon-144×144-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=”640×920″ href=”startup/startup.png” media=”(device-height:480px)”>
還想了解具體的設定可以參考蘋果的官網說明:Configuring Web Applications
當然,對啟動圖,我推薦的做法是隻使用一張114*114的圖片即可。即:
複製程式碼 程式碼如下:<link rel=”apple-touch-icon-precomposed” href=”startup/apple-touch-icon-114×114-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不支援position fixed的解決方法禁止iPhone Safari video標籤視訊自動全屏的辦法

相關文章

IOS開發 最新文章