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. 【数论】Miller_Rabin

    Miller_Rabin素数测试     Miller_Rabin判断单个素数的方法运用了费马小定理,可以说非常之快了.     Miller_Rabin曾经被称作“黑科技”,但是根据费马小定理其实完 ...

  2. JavaBean-DAO模式

    一.信息系统的开发架构   客户层-------显示层-------业务层---------数据层---------数据库 1.客户层:客户层就是客户端,简单的来说就是浏览器. 2.显示层:JSP/S ...

  3. 深入理解Java PriorityQueue

    PriorityQueue 本文github地址 Java中PriorityQueue通过二叉小顶堆实现,可以用一棵完全二叉树表示.本文从Queue接口函数出发,结合生动的图解,深入浅出地分析Prio ...

  4. [attribute] 匹配包含给定属性的元素

    描述: 查找所有含有 id 属性的 div 元素 HTML 代码: <div> <p>Hello!</p> </div> <div id=&quo ...

  5. 如何在Macbook Pro搭建PHP开发环境

    [Apache] sudo apachectl start   // 启动Apache服务 sudo apachectl restart  // 重启Apache服务 sudo apachectl s ...

  6. android 内存处理工具

    1. LeakCanary 检查内存泄露 LeakCanary 是一个开源的在debug版本中检测内存泄漏的java库. 让我们来看看一个cait的例子: 1 2 3 4 5 6 7 8 9 10 1 ...

  7. mysql数据库的一些用法

    mysql数据库语句 1.replace into      REPLACE INTO  (列名1,列名2,列名3) VALUES ('值1','值2','值3');      # 如果数据库中不存在 ...

  8. 2x2矩阵相乘模版

    由于Unity只有4x4矩阵,今天要做一个2x2矩阵的旋转,居然忘了顺序.故写下作为模版记录. 顺序: 下面是使用其进行旋转的C#代码: public struct Position { public ...

  9. log4j.properties的配置

    #初始化类中要使用的Logger对象实例:log4j.rootLogger = [ level ] , appenderName1, appenderName2, … #第一个参数是日志级别(DEBU ...

  10. sublime 自动编译

    Tools --> Build System --> New: { "shell_cmd": "cc.bat \"$file\"" ...