<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<%--初始化移动浏览显示,默认不缩放 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
什么是viewport?(中文意思为”视区“)
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,
这样就不用吧每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页布局),用户可以通过平移、缩放来看网页的不同部分。
移动版的safari浏览器最新引进了viewport这个meta tag,让网页的开发者来控制viewport的大小和缩放,其他手机浏览器页基本支持。
width:viewport的宽度 deivce-width:自动检测移动设备的宽度
height:viewport的高度 device-height:自动检测移动设备的高度
initial-scale:初始缩放比例,也就是当页面第一次load的时候缩放比例。 值为1.0是指未经缩放的web文档
user-scalable:用户是否可以手动缩放 值为yes是允许用户的手动缩放,no是不允许用户的手动缩放
maximum-scale:允许用户缩放到的最大比例 取值范围为 0.25~10.0
minimum-scale:允许用户缩放到的最小比例
webkit是一个开源的浏览器内核引擎。与之相对应的引擎有Gecko(Mozilla Firefox等使用)和Trident(也称为MSHTML,IE使用)
移动屏幕尺寸比PC小很多,webkit浏览器会将一个较大的”虚拟“窗口映射到移动设备的屏幕上,默认的虚拟窗口宽度是980px(这是目前大部分网站标准宽度),
然后按照一定的比例(3:1或2:1)进行缩放,也就是当我们加载一个普通网页的时候,webkit会先以980px的宽度加下网页,然后在缩小为490像素的宽度,这是全局缩小。
也就是页面上的所有元素都会缩小。
-->
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css" />
<script src="jqm/jquery-1.11.2.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
<!--
页面的跳转效果可以通过在超级链接上添加data-transition属性
值如下:
fade:默认值,渐变褪色的动画效果
slide:从右到左滑动的动画效果
slideup:向上滑动的动画效果
slidedown:向下滑动的动画效果
pop:以弹出的效果打开页面
flip:旧页飞出,新页飞入的动画效果
-->
</head>
<body>
<div data-role="page" id="index" data-transition="slide">
<div data-role="header">
<h1>第一个页面</h1>
</div>
<div data-role="main" class="ui-content">
<p>我是第一个页面的内容</p>
<br/>
<br/>
<br/>
<a href="#page2" data-transition="slide">点我跳转到页面二</a>
<br/>
<br/>
<br/>
<a href="#page3" data-transition="slideup">点我跳转到页面三</a>
<br/>
<br/>
<br/>
<br/>
</div>
<div data-role="footer" data->
<h2>首页的底部菜单</h2>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二个页面显示了</h1>
</div>
<div data-role="main" class="ui-content">
<p>我是第二个页面的内容部分哦</p>
<br>
<br>
<br>
<a href="#index" data-transition="slidedown">跳转到首页</a>
<br>
<br>
<br>
<a href="#page3" data-transition="pop">跳转到第三个页面</a>
<br>
<br>
<br>
<br>
<br>
</div>
<div data-role="footer">
<h2>第二个页面的底部菜单栏</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>页面三</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面三的内容</p>
<br>
<br>
<a href="#page2" data-transition="fade">进入页面2</a>
<br>
<br>
<br>
<a href="#index" data-transition="flip">进入首页</a>
<br>
<br>
</div>
<div data-role="footer">
<h3>页面三的底部</h3>
</div>
</div>
</body>
</html>
jQuery mobile 学习01 基本认识和使用
最新推荐文章于 2021-06-21 04:55:32 发布