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接受url参数

    1.正则表达式 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  2. CSS3 中border-image详解

    CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

  3. Boadload和Image$$??$$Limit含义

    Bootloader 即引导加载程序,是系统加电后运行的第一段软件代码.简单的说它们都是bootloader,所完成的任务也大同小异. 熟悉x86体系结构的朋友肯定知道,x86平台上bootloade ...

  4. Elementory os install .net core

    ref link : https://www.microsoft.com/net/core#linuxubuntu sudo sh -c 'echo "deb [arch=amd64] ht ...

  5. Pandas将中文数据集转换为数值类别型数据集

    一个机器学习竞赛中,题目大意如下,本文主要记录数据处理过程,为了模型训练,第一步需要将中文数据集处理为数值类别数据集保存. 基于大数据的运营商投诉与故障关联分析 目标:原始数据集是含大量中文的xls格 ...

  6. StringBuilder和Append的一个程序及一个基础概念

    废话少说直接来说:比如在串口数据操作中,我们只想显示串口接收的字符串,好吧你用string[]吧,有多少个字符串(顺便说下二进制在C#中是以字符串形式出现的)就要分配多少个储存空间,自己试下,要你你干 ...

  7. [算法]检测空间三角形相交算法(Devillers & Guigue算法)

    #pragma once //GYDevillersTriangle.h /* 快速检测空间三角形相交算法的代码实现(Devillers & Guigue算法) 博客原地址:http://bl ...

  8. LR11启动卡修改

    LR11启动卡修改 C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\machine.config <runtime>改为<r ...

  9. 改变Web Browser控件IE版本

    默认的webbrowser控件使用的渲染模式版本似乎是IE7,想要更改更高版本,如下: 在注册表位置 HKEY_CURRENT_USER\Software\Microsoft\Internet Exp ...

  10. 理解GRUB2工作原理及配置选项与方法

    GRUB2是借鉴GRUB改写到更加安全强大到多系统引导程序,现在大部分较新的Linux发行版都是使用GRUB2作为引导程序的.GRUB2采用了模块化设计,使得GRUB2核心更加精炼,使用更加灵活,同时 ...