标签：
打算把叶小钗的这系列移动端开发的过一遍，虽然他是两年前写的但作为啥都没用过的人来讲这应该算是能上手的一些列实践文章，也能让我对知识从0开始不求精通但能认识一遍。
有了前两天的学习，移动端上至少明白了利用meta调试手机端的显示比例问题了;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"/> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <section data-role="page" id="v1" > <header data-role="header">视图1</header> <article data-role="content"> <a href="#v2" data-transition="pop">去视图二</a> </article> <footer data-role="footer">叶脚</footer> </section> <div data-role="button">删除</div> <section data-role="page" id="v2"> <header data-role="header">视图二</header> <article data-role="content"> <a href="#v1">去视图一</a> </article> <footer data-role="footer">叶脚</footer> </section> </body> </html>
做的第一个例子，运行后挺有感觉的 http://sandbox.runjs.cn/show/586h9fwo
但是就不明白为啥两个section只显示一部分，知道看了w3shool的基础教程后总算是明白了,所以这里的一个data-role="page"对应的是一个页面，“data-role”属性是HTML 5的一个新特征，通过设置该属性，jQuery Mobile就可以很快地定位到指定的元素，并对内容进行相应的处理。所以我应该花一点时间把w3上的教程过一遍或许更能理解那些基础的东西。
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此
标签：
原文地址：http://www.cnblogs.com/chen7/p/4668123.html
