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. js asp.net获取时间戳

    方法1: var timestamp = (new Date()).valueOf(); 结果:1280977330748 方法2: var timestamp=new Date().getTime( ...

  2. How to run a (Tomcat)Java application server on a Azure virtual machine

    http://www.windowsazure.com/en-us/documentation/articles/virtual-machines-java-run-tomcat-applicatio ...

  3. 解决jQuery ajax跨域问题，Google、IE、Firefox亲测有效

    直接上最后的结果吧 JS: $.ajax({ type: "GET", async: false, crossDomain: true, url: "www.test.c ...

  4. Signalr简单例子

    一.需要引用的 Js: 二.编码 用的是signalr2,需要新建Startup.cs类,编码如下: using Microsoft.Owin; using Owin; using System; u ...

  5. Dinic算法模板

    详解:http://blog.csdn.net/wall_f/article/details/8207595 算法时间复杂度:O(E * V * V) #include <cstdio> ...

  6. Spring中的事物管理，用 @Transactional 注解声明式地管理事务

    事物: 事务管理是企业级应用程序开发中必不可少的技术,  用来确保数据的 完整性和 一致性. 事务就是一系列的动作, 它们被当做一个单独的工作单元. 这些动作要么全部完成, 要么全部不起作用 事务的四 ...

  7. Spark 1.1.0 编译(为了支持hbase 0.98.6)

    为了支持hbase0.98.6,需要重新编译spark 1. 下载spark 1.1.0源代码,以及 scala-2.10.4的bin包. 将环境变量 SCALA_HOME 设置为 scala-2.1 ...

  8. 【leetcode❤python】 225. Implement Stack using Queues

    #-*- coding: UTF-8 -*-class Stack(object):    def __init__(self):        """        i ...

  9. 关于token的杂记

    http://www.cnblogs.com/xiekeli/p/5607107.html https://www.oschina.net/question/1264088_220768 token作 ...

  10. c# this关键字的理解

    this关键字引用类的当前实例 1/限定被相似的名称隐藏的成员 2/将对象作为参数传递到其他方法 3/声明索引器 实际案例参考: //成员类 public class Employee { priva ...