1.新增html页面。

2.声明html5Document。

3.载入jQuery Mobile Css、jQuery与jQuery Mobile链接库。

4.使用jQuery Mobile定义的html标准、编写网页架构及内容。

向网页中添加jQuery Mobile,添加方法如下：

从CDN引用jQuery Mobile(推荐)　

　　 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

　　　从jQuerymobile.com下载jQuery Mobile库

从 jQuerymobile.com 下载文件。　　　　

　　<link rel=stylesheet href=jquery.mobile-1.3.2.css>

　　<script src=jquery.js></script>

　　<script src=jquery.mobile-1.3.2.js></script>
  • data-role="page" 是显示在浏览器中的页面
  • data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
  • data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
  • data-role="footer" 创建页面底部的工具栏

在写移动端的网站的时候， 一定要写一个meta的name为viewport的属性， 因为该属性代表着网站页面的自适应。简单的写法为：<meta name="viewport" content="width=device-width, initial-scale=1">代表着网站为驱动设备的宽度。

  • width:控制宽度，可以指定一个宽度值，或输入device-width，表示宽度随着设备宽度自动调整
  • height:控制高度，或输入device-height。
  • initial-scale:初始缩放比例，最小为0.25，最大为0.5。
  • minimum-scale:允许用户缩放的最小比例，最小为0.25，最大为0.5。
  • maximum-scale:允许用户缩放的最大比例，最小为0.25，最大为0.5。
  • user-scalable:是否允许用户手动缩放，可以输入0或者1，也可以是输入yes或no。

代码示例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1"><!--自适应页面-->

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>

<body>

<div data-role="page" >

    <div data-role="header">

        <h1>我的网站</h1>

    </div>

    <div data-role="content">

        <p>这是正文部分</p>

        <ul data-role="listview">

            <li data-role="list-divider">我的目标</li>

            <li><a href="http://www.baidu.com">精彩内容即将呈现</a></li>

            <li><a href="http://www.baidu.com">百度一下，就知道</a></li>

            <li><a href="http://www.baidu.com">坚持才能成功</a></li>

        </ul>

    </div>

    <div data-role="footer">

        <h1>这个是页脚文本</h1>

    </div>

</div>

</body>

</html>

结果页面：

用jQuery Mobile搭建一个简单的手机页面的更多相关文章

  1. Prism for WPF 搭建一个简单的模块化开发框架（三） 给TreeView加样式做成菜单

    原文:Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单 昨天晚上把TreeView的样式做了一下,今天给TreeView绑了数据,实现了切换页面功能 上 ...

  2. 用express搭建一个简单的博客系统

    转自:https://blog.csdn.net/qq_29721837/article/details/62055603 Express 简介 Express 是一个简洁而灵活的 node.js W ...

  3. 用nodejs搭建一个简单的服务器

    使用nodejs搭建一个简单的服务器 nodejs优点:性能高(读写文件) 数据操作能力强 官网:www.nodejs.org 验证是否安装成功:cmd命令行中输入node -v 如果显示版本号表示安 ...

  4. 初学Node（六）搭建一个简单的服务器

    搭建一个简单的服务器 通过下面的代码可以搭建一个简单的服务器: var http = require("http"); http.createServer(function(req ...

  5. 转载：用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发

    转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dr ...

  6. 【netty】(2)---搭建一个简单服务器

    netty(2)---搭建一个简单服务器 说明:本篇博客是基于学习慕课网有关视频教学.效果:当用户访问:localhost:8088 后 服务器返回 "hello netty"; ...

  7. 使用gitblit搭建一个简单的局域网服务器

    使用gitblit搭建一个简单的局域网服务器 1.使用背景 现在很多使用github管理代码,但是github需要互联网的支持,而且私有的git库需要收费.有一些项目的代码不能外泄,所以,搭建一个局域 ...

  8. Golang学习-第二篇 搭建一个简单的Go Web服务器

    序言 由于本人一直从事Web服务器端的程序开发,所以在学习Golang也想从Web这里开始学起,如果对Golang还不太清楚怎么搭建环境的朋友们可以参考我的上一篇文章 Golang的简单介绍及Wind ...

  9. Prism for WPF 搭建一个简单的模块化开发框架 （一个节点）

    原文:Prism for WPF 搭建一个简单的模块化开发框架 (一个节点) 这里我就只贴图不贴代码了,看看这个节点之前的效果 觉得做的好的地方可以范之前的文章看看 有好的建议也可以说说   填充数据 ...

随机推荐

  1. Spark实战4:异常检测算法Scala语言

    异常检测原理是根据训练数据的高斯分布,计算均值和方差,若测试数据样本点带入高斯公式计算的概率低于某个阈值(0.1),判定为异常点. 1 创建数据集转化工具类,把csv数据集转化为RDD数据结构 imp ...

  2. python核心编程学习记录之映射和集合类型

    字典是python里唯一的映射类型

  3. [转]网络诊断工具：MTR

    MTR是Linux平台上一款非常好用的网络诊断工具,集成了traceroute.ping.nslookup的功能,用于诊断网络状态非常有用.能按要求对路由中所有节点进行批量测试 第一列(Host):I ...

  4. WebClient与WebRequest差异

    WebRequst的使用 WebClient和HttpWebRequst是用来获取数据的2种方式,在我的这篇数据访问(2)中主要是讲的WebClient的使用,一般而言,WebClient更倾向于“按 ...

  5. js页面刷新之实现普通页面

    准备面试题目的时候遇到了页面刷新,就整理了一下,网上查找,大概就是八种方法,但是自己测试的时候出现了几个问题,跟大家分享: 首先准备一个测试页面: <!--html代码--> <h1 ...

  6. 为什么要在html和body加上“height:100%;”

    元素中有内容的时候div才能被撑起来所以我给div加了背景但是也不显示,就是因为没有内容,这个时候的解决办法就是 html,body{ height:100%; }

  7. find函数

    Python find() 方法检测字符串中是否包含子字符串 str ,如果指定 beg(开始) 和 end(结束) 范围,则检查是否包含在指定范围内,如果包含子字符串返回开始的索引值,否则返回-1. ...

  8. 1106 c程序的推导过程

  9. Oracle使用经验总结

    oracle数据库是一种大型数据库系统,一般应用于商业,政府部门,它的功能很强大,能够处理大批量的数据,在网络方面也用的非常多.Oracle数据库管理系统是一个以关系型和面向对象为中心管理数据的数据库 ...

  10. hdu 5446 Unknown Treasure 卢卡斯+中国剩余定理

    Unknown Treasure Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...