一、页面整体架构
1、必须用HTML5的文档类型头<!DOCTYPE html>
2、包含viewport的meta标签
3、包含jquerymobile的css和js文件
4、使用data-role="page"结构
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> </head> <body><div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div></body></html>
二、viewport meta标签
viewport标签指定浏览器如何显示页面的放大等级和尺寸。如果没有指定，许多mobile浏览器会使用大约900像素的宽度，这样屏幕会看起来缩小了而且太宽了。通过设置viewport属性content="width=device-width, initial-scale=1"，宽度会被设置为设备屏幕的像素宽度。
这个设置不会禁止用户缩放页面。在IOS上有个小问题，就是当改变设备方向时不能够很好的设置宽度。如果需要，你可以设置其他的viewport值来禁止缩放。
三、多页面结构
一个单独的HTML文档可以包含多个page页面。每一个page有一个唯一的ID(id="foo")，通过href="#foo"可以链接到这个页面。
注意：由于采用hash来记录所有的Ajax'pages'导航历史记录
四、文档的标题
多页面情况下使用data-title属性来设置标题。例如
<div data-role="page" id="foo" data-title="Page Foo">
</div><!-- /page -->
扫一扫
5102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
