iPad上Web App實現(xiàn)全屏顯示的方法

2013-10-30 15:56:02來源:西部e網(wǎng)作者:

Web App在iPad調(diào)試頁面,我們常常會遇到需要全屏顯示的效果。下面就介紹一下如何使用HTML5代碼來實現(xiàn)。

Web App在iPad調(diào)試頁面,我們常常會遇到需要全屏顯示的效果。下面就介紹一下如何使用HTML5代碼來實現(xiàn)。

1、全屏顯示:

<meta name="apple-mobile-web-app-capable" content="yes" />

2、設(shè)備寬度顯示

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

先將以上兩段代碼加入到HTML5開發(fā)的頁面當中。

3、將頁面添加到iPad桌面

\

用iPad下的Safari瀏覽器訪問開發(fā)的頁面,點擊“分享”圖標,然后在下拉界面中選擇“添加到主屏幕”。

可以修改名字,也可以通過代碼:

<link rel="apple-touch-icon" href="icon.png" />

修改圖標,這樣就有了一個可以全屏的webApp了。

注意:第一次可能不顯示全屏,或許有緩存的問題。

關(guān)鍵詞:webappiPad全屏