本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.15节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
jQuery Mobile提供了一个叫做“全屏模式”的功能。它表示，在默认情况下header和footer是覆盖在content上面的，当点击了content区时，header和footer会消失。如果你在手机上安装了Web应用程序（应用程序间有书签图标）或者当你将自己的Web应用程序与原生的Web应用程序框架（比如Phonegap）集成时，你的应用程序就可以全屏显示：没有浏览器的地址栏、工具栏以及状态栏。为了能最佳利用“全屏模式”，如果能完全隐藏自己的header和footer那将是很有用的——不像在先前的示例中，“隐藏”仅仅是表示在页面的下方显示footer。代码清单9-17启用了全屏模式。
代码清单9-17 在content上面显示header和footer，以便全屏查看
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Fullscreen</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 </head> 15 <body> 16 17 <div data-role="page" data-fullscreen="true"> 18 19 <div data-role="header" data-position="fixed"> 20 <h1>This is drawn <em>over</em> the content section</h1> 21 </div> 22 23 <div data-role="content"> 24 <h1>Header</h1> 25 <p>Click to hide the header and footer</p> 26 <p>Click again to get them back</p> 27 </div> 28 29 <div data-role="footer" data-position="fixed"> 30 <p>In a long page, this footer would also be drawn over 31 the content section.</p> 32 </div> 33 34 </div> 35 36 </body> 37 </html>第17行提供了启用全屏模式的选项。为了能最佳利用全屏模式下页面的剩余区域，引入一些自定义CSS样式还是很有用的。
相关资源：Cisco ASA 5500 Ios 9.15-k8.bin