jQuery Mobile 在刚推出的时候，曾经宣传了几个重要的特点，除了 Kayo 在本系列文章中多次介绍的“触摸屏优化”外，另外一个最直接的特点就是“响应式设计”，关于响应式设计，Kayo 已经写了不少相关的文章进行说明，而本文要介绍的，是 jQuery Mobile 中为响应式设计作出的优化和工具。

 

在 jQuery Mobile 测试版本的文档中，有一个栏目名为“Responsive Layout Helpers”，即响应式布局助手，但在正式版的文档中，却删去了这个栏目，但这并不意味着 jQuery Mobile 削减了对响应式设计的支持，相反，jQuery Mobile 对响应式设计有着更好的支持，而且这种支持是融入到 jQuery Mobile 的设计中，并不完全依靠开发者调用工具来调整网页达到完善的响应式布局。由于很多响应式的内容 Kayo 之前已经写文章介绍过，因此本文只会对这些内容作出汇总和简介，详细内容请参考具体的相关文章。

 

一. Media Queries

在 jQuery Mobile 的 CSS 源码中，会有大量类似下面的代码：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dpi) {
 
    .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
    .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
    .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
    .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
    .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
        background-image: url(images/icons-36-white.png);
        -moz-background-size: 776px 18px;
        -o-background-size: 776px 18px;
        -webkit-background-size: 776px 18px;
        background-size: 776px 18px;
     }
    .ui-icon-alt {
        background-image: url(images/icons-36-black.png);
    }
 }
 

 

这是 Media Queries ，可以根据条件匹配相应的 CSS ，这样在不同的情况下可以应用相应的 CSS ，以达到自适应的效果。关于 Media Queries ，Kayo 之前已经写了一篇文章进行详细的介绍，请参考 ——

另外，jQuery Mobile 默认会对组件进行结构、样式和交互上的增强，因此除了使用 Media Queries 为不同的情况匹配相应的 CSS 外，jQuery Mobile 在设计增强的组件结构时也针对响应式布局进行设计，使到由 jQuery Mobile 驱动的 Web Apps 在外观上可以更加灵活。

 

二. 运行媒介查询 (Running Media Queries)

运行媒介查询 (Running Media Queries) 是 jQuery Mobile 的一个实用工具，它在 jQuery Mobile 内部有多次调用，主要是确保一些效果能够在合适的情况下运行。例如：在介绍 jQuery Mobile 页面转场时，有说明过，当转场页面的宽度过大时，翻转等 3D 效果可能会过度消耗系统资源，因此开发者可以使用 $.mobile.maxTransitionWidth 控制转场最大宽度，超过该宽度则不使用转场动画，而判断宽度是否超过设定值的技术原理就是利用运行媒介查询。作为开发者，我们也可以利用则个工具帮助我们 进行响应式设计，这里需要明确一点，这个工具的作用是判断当前情况是否已经满足一个 Media Queries ，即使用 JavaScript 判断 Media Queries 内的条件是否满足。如果你已经了解了第一部分的内容，会了解到在开发中可以根据 Media Queries 的结果判断是否应该引入一段 CSS ，但网页布局中有时候也需要判断是否引入 JavaScript ，运行媒介查询正是可以用于判断是否应该引入一段 JavaScript 。

 

例如：

$.mobile.media('screen') // 测试媒体类型是否为 'screen'
$.mobile.media('screen and (min-width: 480px)') // 测试媒体类型是否为 'screen' 并且窗口宽度大于等于 '480px'
$.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') // 测试是否为 webkit 内核并且像素比为 2x (可以用来判断是否为 iPhone 4)
 
// 根据判断结果作出相应的处理
if( $.mobile.media('screen and (min-width: 480px)') )
    // 相应的处理
 

 

三.设备方向变化事件与方向类

当设备方向变化（即设备在横向和纵向的方向间转变）时，会触发 orientationchange 事件，这个事件的回调函数的事件对象(e 或 event)中会封装一个 orientation 属性，其值为 "portrait" 或 "landscape" ，用来描述设备是改变为纵向时触发事件还是改变为横向时触发事件。在旧版本的 jQuery Mobile ，这个值也会作为 class 添加到 html 标签中，让开发者可以依据这个 class 添加相应的 css ，即方向类，但在新版的文档中已经没有关于方向类的说明，Kayo 调试后也没有出现相应的方向类，因此在新版 jQuery Mobile 中已经不支持原生方向类，但可以通过 jQuery 达到相同的效果，例如：

$(window).bind( 'orientationchange', function(e){
    if( e.orientation == 'portrait' ) $('html').addClass('portrait').removeClass('landscape');
    else if( e.orientation == 'landscape' ) $('html').addClass('landscape').removeClass('portrait');
 });
 

 

分别为 landscape 和 portrait 指定相应的样式即可。

另外，关于 orientationchange 事件的绑定元素和不支持该事件时的处理也需要特别注意，具体可以参考 —— 《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解》的第三部分“设备方向变化事件 (Orientation change event)”。

 

最后补充一个 Demo ，建议在 Android , iPhone/iPad 的系统浏览器上浏览，用于测试 orientationchange 的基本效果。

 

关于响应式设计的详细说明。可以参考 —— 《前端开发之响应式设计》

至本文为止，已经用了 15 篇文章详细阐述 jQuery Mobile 的各个组件、事件、方法以及其中的 Ajax 机制、增强机制和执行流程等技术原理，相信各位对 jQuery Mobile 已经有了一定的熟悉，接下来要说明的，是 HTML5 在 Web Apps 上的应用。实际上，HTML5 有很多相对于 HTML4 的新特性都是为移动开发而设计的，因此这也是对一系列 HTML5 新特性的说明。

 

原文由 Kayo Lee 发表，原文链接：http://kayosite.com/web-app-by-jquery-mobile-and-html5-responsive-of-web.html