[置顶] jquerymobile页面结构

一、页面整体架构

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 -->

你可能感兴趣的:([置顶] jquerymobile页面结构)