正常情況下，當你用手機瀏覽器打開網頁時，導航就停留在上面，這樣實際展示的屏幕就變小了。
那能不能加載后，屏幕就自動全屏呢？這就是本文要討論的。
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)">
<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;
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方法。
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！