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. cookie的三种操作方法

    1,jquery.cookie.js 这一篇文章已经写的很详细了: http://www.cnblogs.com/afuge/archive/2013/07/03/3169048.html 2,原生j ...

  2. Leetcode: Longest Repeating Character Replacement && G 面经

    Given a string that consists of only uppercase English letters, you can replace any letter in the st ...

  3. c# 中get和post的方法

    用GET发送数据则用REQUEST.QUERYSTRING[''ID'']接收 一.request.aspx 二.request.aspx.cs 三运行效果: 以下是数据发送的途径http://loc ...

  4. My roadway of compilers principles.

    龙书学习过程代码记录--Python3.5(毕竟第一遍看书,书里面的例子全用python写的) One 将中缀表达式翻译成后缀表达式↓ class Parser(object): def __init ...

  5. Android实现归属地查询功能

    实现归属地查询大体有两种方法可以实现,一种是通过归属地API进行查询,另一种是查询本地数据库.两种方法各有优劣,最好结合起来使用,我本次采用的是查询数据库的方法.首先需要从网上下载归属地数据库call ...

  6. lievent源码分析：evbuffer

    struct evbuffer定义在evbuffer-internal.h文件中. evbuffer结构内部保存一个以evbuffer-chain结构为节点的链表,evbuffer内部有两个分别指向首 ...

  7. .Net最佳实践3：使用性能计数器收集性能数据

    本文值得阅读吗? 本文讨论我们如何使用性能计数器从应用程序收集数据.我们将先了解的基本知识,然后我们将看到一个简单的示例,我们将从中收集一些性能数据. 介绍: - 我的应用程序的性能是最好的,像火箭 ...

  8. spring cache

    spring-ehcache.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?> <beans ...

  9. Reflection

    Reflection 反射能在运行时获取一个类的全部信息,并且可以调用类方法,修改类属性,创建类实例. 而在编译期间不用关心对象是谁 反射可用在动态代理,注解解释,和反射工厂等地方. -------- ...

  10. int与string之间的类型转换--示例

    package demo; public class IntDemo { public static void main(String[] args) { // String-->int 类型转 ...