本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.15节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.15 技巧：优化header和footer以便全屏查看
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样式还是很有用的。
