正常情況下,當(dāng)你用手機(jī)瀏覽器打開網(wǎng)頁時,導(dǎo)航就停留在上面,這樣實際展示的屏幕就變小了。
那能不能加載后,屏幕就自動全屏呢?這就是本文要討論的。
Add to Home Screen
說到全屏不得不談iPhone下的safari有一個特別且重要的功能就是“Add to Home Screen”。(就在Safari瀏覽器最下方,最中間的那個位置,點擊選擇即可)
這個功能類似于把網(wǎng)頁地址作為一個超鏈接的方式放到手機(jī)桌面,并且可以直接訪問。不過要注意的是每個鏈接都需要js進(jìn)行一次特殊處理,那就是監(jiān)聽頁面點擊事件,如果是鏈接,則使用window.location = this.href;,這樣頁面就不會從當(dāng)前的本地窗口跳到瀏覽器了。
那我們看看具體代碼是怎么處理的。
其實只需要在HEAD代碼里增加一些必要數(shù)據(jù):
全屏js代碼
??? if (ua.indexOf('Android') !== -1) {
??????? // 56對應(yīng)的是Android Browser導(dǎo)航欄的高度
??????? page.style.height = window.innerHeight + 56 + 'px';
??? } else if (/iPhone|iPod|iPad/.test(ua)) {
??????? // 60對應(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)航欄的高度 獲取到真實的屏幕高度。最后再調(diào)用scrollTo方法。
新聞熱點
疑難解答
圖片精選