移動應(yīng)用中的用戶體驗是最重要的，在本文中，將給讀者講解在日新月異的對移動應(yīng)用支持的相當(dāng)優(yōu)秀的瀏覽器中，如何實現(xiàn)豐富多彩的全屏效果。本文適合的閱讀對象為有一定移動HTML 5開發(fā)基礎(chǔ)的讀者。

目前，我們已經(jīng)能夠?qū)崿F(xiàn)多姿多彩的網(wǎng)站或網(wǎng)頁的全屏效果，并且已經(jīng)有不少實現(xiàn)的方法。全屏效果的移動應(yīng)用，給用戶更寬廣的界面視野，因為手機(jī)的屏幕一般都比較小，可以讓用戶十分方便地操作，特別在一些移動游戲中尤其如此。幸好現(xiàn)在各大移動瀏覽器都支持“安裝式”的web應(yīng)用，其中大多用到了全屏效果。

下面我們來看下實現(xiàn)web應(yīng)用全屏效果有什么方法：

隱藏地址欄

讀者能想到最簡單的方法，就是自動隱藏瀏覽器的地址欄，可以使用一段簡單的Javascript代碼：

<script type="text/javascript"> 
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
    function hideURLbar(){ 
              window.scrollTo(0,1); 
    } 
script> 

這個方法無疑是最簡單的，在頁面打開的時候來瀏覽器的地址欄被自動隱藏了。但可惜的是，這樣的方法并不是最標(biāo)準(zhǔn)的并且瀏覽器對其支持不大好。你可能不得不處理一些奇怪的問題和現(xiàn)象。比如當(dāng)用戶在頁面需要來回導(dǎo)航的時候，偶然地址欄還是會在頁面中恢復(fù)其位置。所以有的時候，用戶對此感到惱怒。而且要注意只有當(dāng)頁面內(nèi)容的高度超過屏幕瀏覽器的高度的時候，才會自動隱藏地址欄，否則不會自動隱藏，如果內(nèi)容比較少的時候，可以在滾動之前程序動態(tài)設(shè)置一下body的高度，增加如下代碼

     . if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 
    bodyTag = document.getElementsByTagName('body')[0]; 
    bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; 
} 
•    

利用移動瀏覽器的全屏API特性

現(xiàn)在的移動瀏覽器中，大多支持全屏API，而且全屏API是HTML 5規(guī)范中的標(biāo)準(zhǔn)。但遺憾的是iOS不支持全屏API（IE 11才開始支持全屏API）。我們下面討論的是支持全屏API的Chrome for Android和FireFox。

在使用全屏API中，重點關(guān)注以下幾個API:

•     element.requestFullscreen()

 以全屏方式顯示元素（目前Chrome和Firefox都支持）

•    document.cancelFullscreen()

取消全屏模式（目前Chrome和Firefox都支持）

•    document.fullscreenElement

如果當(dāng)前任何一個元素以全屏模式顯示，則返回true

要注意當(dāng)應(yīng)用在全屏模式下的時候，用戶不能使用原來瀏覽器的控件了，這將稍微改變用戶的體驗。他們不能使用前進(jìn)和導(dǎo)航按鈕；他們唯一能用的按鈕就是刷新按鈕。因此開發(fā)者必須應(yīng)對這種情況。可以在全屏模式下，使用CSS選擇器去改變樣式。下面看下如何用代碼實現(xiàn)全屏模式：

<button id="goFS">Go fullscreen<button> 
<script> 
   var goFS = document.getElementById("goFS"); 
   goFS.addEventListener("click", function() { 
      document.body.requestFullScreen(); 
   }, false); 
</script> 

以上是全屏模式最簡單的用法了。Mozilla發(fā)布了一個很有用的腳本能很好地實現(xiàn)全屏模式，摘要相關(guān)代碼如下：

 function toggleFullScreen() { 
var doc = window.document; 
var docEl = doc.documentElement; 
 
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen; 
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen; 
 
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement) { 
  requestFullScreen.call(docEl); 
} 
else { 
  cancelFullScreen.call(doc); 
} 

這段代碼的核心其實就是加上判斷不同的瀏覽器的類型而已。當(dāng)然，如果開發(fā)者覺得使用起來依然不方便，可以嘗試使用 Screenfull.js這個小巧的和全屏相關(guān)的Javascript類庫，也是挺好用的。

如何啟動全屏API的應(yīng)用

要在啟動一個頁面的時候，自動進(jìn)入全屏模式是不可能的。其原因可能在于瀏覽器廠商可能也意識到不經(jīng)過用戶允許而自動進(jìn)入全屏模式，是十分不厚道的事情。因此，用戶如果要進(jìn)入全屏模式，都必須由用戶主動確認(rèn)。目前各主流的移動瀏覽器，都支持使用標(biāo)簽和腳本等，實現(xiàn)啟動全屏API，分別介紹下：

iOS

在iPhone中，用戶可以將Web應(yīng)用安裝到home主屏中去，并且讓它們以全屏方式啟動，代碼為；

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

如果content設(shè)置為yes,則表示啟動全屏模式，否則默認(rèn)為否。

Chrome for Android

Chrome團(tuán)隊最近實現(xiàn)了和iOS類似的機(jī)制，當(dāng)用戶增加應(yīng)用到主屏?xí)r，實現(xiàn)全屏模式，代碼為：

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

Firefox OS

=在Firefox OS手機(jī)系統(tǒng)中，實現(xiàn)的機(jī)制稍微復(fù)雜。Firefox OS需要開發(fā)者編寫部署的文件，然后Firefox OS在應(yīng)用部署的時候會進(jìn)行自動解析并安裝為全屏應(yīng)用，代碼片段：

{ 
  "name": "My App", 
  "description": "My elevator pitch goes here", 
  "launch_path": "/", 
  "icons": { 
    "128": "/img/icon-128.png" 
  }, 
  "fullscreen": true 
} 

詳細(xì)的用法參考：https://developer.mozilla.org/en-US/Apps/Developing/Manifest#fullscreen

全屏API使用的技巧

如果想將body部分進(jìn)行全屏化，則在基于Webkit或者blink引擎的瀏覽器中，會發(fā)現(xiàn)body部分會縮小到只能包含內(nèi)容的區(qū)域，周圍會有黑色的縫隙（但Mozilla的Gecko不會有這個問題）。如下圖所示：

可以使用如下的方法去進(jìn)行修復(fù)：

document.documentElement.requestFullScreen(); 

其效果如下圖：

如何讓視頻變?yōu)槿?/strong>

<video id=videoElement></video> 
<button id="goFS">Go Fullscreen</button> 
<script> 
   var goFS = document.getElementById("goFS"); 
   goFS.addEventListener("click", function() { 
      var videoElement = document.getElementById("videoElement"); 
      videoElement.requestFullScreen(); 
   }, false); 
</script> 

　<div id="container"> 
  <video><video> 
  <div> 
    <button>Play<button> 
    <button>Stop<button> 
    <button id="goFS">Go fullscreen<button> 
  <div> 
<div> 
<script> 
   var goFS = document.getElementById("goFS"); 
   goFS.addEventListener("click", function() { 
      var container = document.getElementById("container"); 
      container.requestFullScreen(); 
   }, false); 
<script> 

　<style> 
#goFS:full-screen #goFS { 
  display: none; 
} 
#goFS:-webkit-full-screen #goFS { 
  display: none; 
} 
#goFS:-moz-full-screen #goFS { 
  display: none; 
} 
<style> 

　　if(window.navigator.standalone == true) { 
        //應(yīng)用已經(jīng)安裝而且為全屏模式 
} 

　selector:-webkit-full-screen { 
  display: block; // 只在全屏模式下顯示 
} 

selector { 
  display: none; // 不在全屏模式下隱藏元素 
} 

selector:-moz-full-screen { 
  display: block; // hides the element when not in fullscreen mode 
} 
 
selector { 
  display: none; // hides the element when not in fullscreen mode 
}