标签：jquery mobile 手机浏览器 移动设备 移动浏览 浏览器
<%@ 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 手机浏览器 移动设备 移动浏览 浏览器
原文地址：http://blog.csdn.net/responsecool/article/details/43952455
