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

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

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

隱藏地址欄

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

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

這個(gè)方法無(wú)疑是最簡(jiǎn)單的，在頁(yè)面打開(kāi)的時(shí)候來(lái)瀏覽器的地址欄被自動(dòng)隱藏了。但可惜的是，這樣的方法并不是最標(biāo)準(zhǔn)的并且瀏覽器對(duì)其支持不大好。你可能不得不處理一些奇怪的問(wèn)題和現(xiàn)象。比如當(dāng)用戶在頁(yè)面需要來(lái)回導(dǎo)航的時(shí)候，偶然地址欄還是會(huì)在頁(yè)面中恢復(fù)其位置。所以有的時(shí)候，用戶對(duì)此感到惱怒。而且要注意只有當(dāng)頁(yè)面內(nèi)容的高度超過(guò)屏幕瀏覽器的高度的時(shí)候，才會(huì)自動(dòng)隱藏地址欄，否則不會(huì)自動(dòng)隱藏，如果內(nèi)容比較少的時(shí)候，可以在滾動(dòng)之前程序動(dòng)態(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'; 
} 
•    

利用移動(dòng)瀏覽器的全屏API特性

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

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

•     element.requestFullscreen()

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

•    document.cancelFullscreen()

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

•    document.fullscreenElement

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

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

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

以上是全屏模式最簡(jiǎn)單的用法了。Mozilla發(fā)布了一個(gè)很有用的腳本能很好地實(shí)現(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); 
} 

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

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

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

iOS

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

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

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

Chrome for Android

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

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

Firefox OS

=在Firefox OS手機(jī)系統(tǒng)中，實(shí)現(xiàn)的機(jī)制稍微復(fù)雜。Firefox OS需要開(kāi)發(fā)者編寫(xiě)部署的文件，然后Firefox OS在應(yīng)用部署的時(shí)候會(huì)進(jìn)行自動(dòng)解析并安裝為全屏應(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引擎的瀏覽器中，會(huì)發(fā)現(xiàn)body部分會(huì)縮小到只能包含內(nèi)容的區(qū)域，周?chē)鷷?huì)有黑色的縫隙（但Mozilla的Gecko不會(huì)有這個(gè)問(wèn)題）。如下圖所示：

可以使用如下的方法去進(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 
}