Be For Web - JavaScript http://www.beforweb.com/taxonomy/term/9 en 前端开发者的跨平台移动应用开发策略及工具 http://www.beforweb.com/node/22 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-developers-coder-coding-mobile-framework.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>愉悦的周五,早些回到家,冲澡吃饭照顾猫咪家务完毕已然超过九点的样子。登录博客后台,进入编辑页面,才觉得些许轻松安逸。不坏,一天里能有这么一会沉浸在这样的感觉里,足够了。</p> <p>在之前的一篇文章中,我们曾经讨论过,对于交互和视觉设计相关职能的从业人员来说,<a href="/node/14">从传统Web行业向移动应用领域转型的过程中需要学习和注意的问题</a>。这篇文章中提到过&ldquo;混合型应用&rdquo;的概念,以及与之相关的两本开发指导书籍。今天这篇文章的英文原文,就是来自这两本书的作者&mdash;&mdash;移动应用开发者Jonathan Stark。</p> <p>本文中,他将站在传统Web前端开发人员的角度,为我们介绍一些在实际项目案例中总结出来的移动应用开发方法策略,以及几类具有代表性的用于打造跨平台移动应用的前端开发工具。</p> <p>各位前端开发相关职能的同行们,扩展视野、提升技能、随&ldquo;机&rdquo;应变的时机已然成熟;衷心希望本文可以成为推动大家事业进步发展的一个催化点<a class="eLink" href="http://beforweb.com">。</a>不多说了,我们来看正文。</p> <!--break--><p>无论站在怎样的角度去衡量,移动互联网及客户端应用的发展势头都是非常迅猛的。日均使用量、智能手机的普及率、来自移动设备的订阅量、搜索引擎流量、广告呈现、应用售卖...所有这些都处于迅速上升的状态。可以预计,在不久的将来,移动设备将拥有足够的成熟度与普及率,并跻身于传统桌面电脑、笔记本等硬件平台的行列,成为我们日常生活的主要设备。</p> <p>巨大的移动市场为传统Web设计开发人员带来了新的机遇与挑战。各类移动设备在爆发式增长的同时,也带来了前所未有的分裂与混乱的状况。如果需要同时为多平台设备进行客户端应用的开发、测试和维护,势必会消耗大量的资源与成本。</p> <p>本文中,我们首先会对几种移动化解决方案进行比较和分析,然后将重点放在一些常见的用于跨平台移动应用开发的前端框架工具上;不过我不会在最后选出一个所谓的最优方案&mdash;&mdash;开发方式的选择最终会取决于你的项目本身,包括业务模式、需求、目标市场、开发资源等多方面因素。本文的主要目标是提供一些有用的信息,帮助各位读者在实际项目中选择最合适的方法与工具。</p> <h3> Web应用(Web App)与原生客户端应用(Native App)</h3> <p>关于这两种移动化方案孰优孰劣的辩论已然有不少了。</p> <p>我相信,如果你能以Web应用的方式打造移动化产品,那么你确实应该这样做;反之则不应该...另外一种情况则介于两者之间,即通过HTML、CSS、JavaScript等前端技术,结合移动设备原生开发方式,打造所谓的混合型应用。</p> <p>看似废话,但重点在于&ldquo;能&rdquo;或&ldquo;不能&rdquo;。这里我们主要指具体的项目需求,而非技术开发能力。我所在的团队,做过的多数案例,都来自于企业级的客户。大公司,顾名思义,在人员、产品及服务等方面都具有相当的规模,他们所需要的移动化解决方案在跨平台方面的需求都很高。</p> <p>当接手一个新的企业级移动化项目时,我会将Web App作为默认的首选方式,同时结合以下三个问题进行进一步评估:</p> <ol> <li> <strong class="eTitle">功能方面,是否涉及那些只有本地应用才能利用的设备硬件资源?</strong></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>比如,一款有条形码扫描功能的应用,必须配合设备的摄像头进行工作,而摄像头是浏览器无法获取的硬件资源,所以这款应用不能以Web App的形式存在;类似的功能还包括影像音频的录制传输、后台运行、消息推送等。如果该产品确实必须基于这些功能才能被正常使用,那么原生客户端应用便是不二之选。</p> </li> <li> <strong class="eTitle">该产品的用户是谁?</strong></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>如果产品拥有大规模的公众用户群,那么原生或Web应用的方式都是可选的,前者可以通过平台官方的App Store或应用市场进行推广,后者的跨平台性更好。如果产品属于公司或组织内部使用的管理信息系统等类型,那么Ad hoc、类似<a href="http://www.apperian.com/">Apperian</a>这样的第三方App Store或Web App都是可选的。</p> </li> <li> <strong class="eTitle">该应用在系统资源消耗等方面的敏感度如何?</strong></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>很多方面的因素会使移动设备浏览器占用过多的内存资源,从而影响Web App的执行效率及用户体验。这些因素包括半透明视觉效果及动画效果、大量的内容数据、文件加密和解码、基于地图的复杂交互方式等。</p> </li> </ol> <p>回答了这三个问题之后,对解决方案的选择便容易多了。举例说,比如我收到的需求是为企业员工设计开发一款B2E应用,用来管理他们的个人信息及收益情况,并且不需要使用移动设备提供的高级硬件功能,那么Web App的方式是最恰当的选择。另外一方面,如果需求是开发一款面向大众的虚拟地图应用,并需要配合手机的陀螺仪功能才可以工作,那么我们必须选择本地客户端的方式进行开发<a href="http://beforweb.com" rel="eLink">。</a></p> <p>不过,正如我们之前提到的,在这两者之间,还有另外一种混血方案可以去考虑,也就是混合型客户端应用。</p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 原生客户端应用(Native App)与混合型客户端应用(Hybrid App)</h3> <p>所谓混合型应用,就是在原生客户端中嵌入基于前端技术构建的页面视图;这种方式其实已经很常见了。本质上讲,页面视图就是HTML页面,但它不需要另外调用移动设备中的浏览器进行查看和操作。</p> <p>混合型应用的典型实例其实是我们非常熟悉的:iPhone、iPad等iOS设备的本地App Store或iTunes,以及Twitter和Facebook的客户端等。</p> <p>在混合型应用中,原生的部分其实只相当于一个架子或容器,应用的核心是基于HTML、CSS、JavaScrit或前端框架打造的页面视图。页面的静态文件资源可以存储在服务器端,动态数据通过Ajax的方式在页面视图与移动应用中传输。</p> <p>所以,虽然从技术上讲,混合型应用是设备本地化的,但它们显然拥有两种不同的运作方式。下面是两个很常见的问题,在需求评估时经常会遇到。</p> <h4> Q:如果我有技术及资源去开发一套纯粹的原生客户端应用,那么有什么必要使用HTML等Web前端开发方式去打造混合型应用呢?</h4> <p>A:混合性应用的解决方案最主要的目的是解决跨平台的问题;对于每个平台,只需开发和维护&ldquo;容器&rdquo;性质的本地应用部分,而实际的内容功能则可以统一由一套页面视图来担当。</p> <h4> Q:那么干脆只做一套Web App好了,为什么还要使用原生客户端作为容器呢?</h4> <p>A:这个问题的答案包括两方面:</p> <ol> <li> 商业需求:对于很多客户案例来说,将应用通过App Store或Market推广出去,是一种商业方面的需求。比如,客户也许会希望自己的产品是付费应用,或者开发前的用户研究表明他们的用户多数是通过App Store安装本地客户端的。</li> <li> 硬件功能需求:混合型应用的一个优势在于,虽然本地化的框架只是作为页面视图的容器,但它毕竟是本地化的,在需要的时候,仍可提供访问硬件设备及相关功能的权限;这是单一的Web App所无法做到的。技术方面,可以通过JavaScript经由本地应用框架,与硬件功能进行通讯,例如控制摄像头等。</li> </ol> <p>我确信,通过这种需求梳理,多数人会倾向于混合型应用的方式。其实这也正是本文接下来的主线&mdash;&mdash;我们一起来看看有哪些前端开发工具是可以帮助我们进行混合型应用的开发的。我将它们分为四大类,接下来会分别进行介绍,并对它们的适用情况进行简单的对比<a href="http://beforweb.com" rel="eLink">。</a></p> <h3> 跨平台的前端开发工具</h3> <p>这是第一大类,主要包括一些在传统Web前端开发方面比较常见的JS框架。它们在混合型应用的页面视图中可以起到同样重要的作用。</p> <h4> jQuery</h4> <p><a href="http://jquery.com/">jQuery</a>显然是最有群众基础的JS库之一,为各种常见的JS功能需求提供了统一的API,包括DOM操作、Ajax、事件绑定等。它通过了A、B、C全部三个级别浏览器(包括桌面与移动版本)的严格测试,拥有庞大的开发者社区以及优质的文档资源,并且是完全开源的。</p> <p>凡事有利必有弊,jQuery在浏览器方面的优异表现,一定程度上取决于它包含了大量用于修正桌面浏览器兼容性问题的代码;对于移动应用方面的开发来说,这方面的代码是没什么意义的。这让jQuery看起来有些重了。</p> <p>对我个人来说,如果需要开发一个传统的、主要用于桌面设备浏览的网站,那么jQuery会是我的主要选择。但是对于网站移动化方面的项目或是混合型应用的开发,我不会选择它。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-jquery.jpg" rel="lightbox"><img alt="developers-guide-mobile-frameworks-jquery" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-jquery.jpg" style="width: 500px; height: 354px; " /></a></p> <h4> Zepto</h4> <p>在移动化开发方面,作为一款更轻量的框架,<a href="http://zeptojs.com/">Zepto</a>是jQuery的一个不错的替代品。Zepto并没有被声明可以兼容旧浏览器,包括IE6等,同时,它在功能方面却几乎可以与jQuery媲美。如果你习惯于使用jQuery,那么你完全可以通过Zepto进行网站移动化或是混合型应用的开发。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-zepto.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-zepto" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-zepto.jpg" style="width: 500px; height: 405px; " /></a></p> <h4> XUI</h4> <p>作为一款轻量级JavaScript框架,<a href="http://xuijs.com">XUI</a>是特别为移动版本的浏览器打造的。XUI的侧重点是移动浏览器中最常见的功能需求,以最少的代码量实现最基本的功能。语法方面也很简单,不过与jQuery的风格有所区别,需要加以习惯。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-xui.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-xui" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-xui.jpg" style="width: 500px; height: 282px; " /></a></p> <h4> Lawnchair</h4> <p><a href="http://westcoastlogic.com/lawnchair">Lawnchair</a>也是一款轻量级JS库,它最大的特色是,可以将客户端抽象为持久化的&ldquo;无SQL&rdquo;风格的数据存储空间。它采用适配器模式,支持多重回调机制。语法风格非常简单直白,支持简单的query查询。</p> <p>在开发混合型应用或传统网站时,出于客户端持久化存储功能的需求,或是性能等方面的考虑,我会选择Lawnchair作为框架<a href="http://beforweb.com" rel="eLink">。</a></p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-lawnchair.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-lawnchair" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-lawnchair.jpg" style="width: 500px; height: 292px; " /></a></p> <h4> 其他</h4> <p>可以辅助移动应用开发的JS框架还有不少,并且会时不时的冒出一些新的。值得一提的还有<a href="http://nowjs.com/">now.js</a>、<a href="http://documentcloud.github.com/backbone/">backbone.js</a>和<a href="http://documentcloud.github.com/underscore/">underscore.js</a>等。</p> <h3> 专门用于打造移动客户端的JavaScript UI 框架</h3> <h4> jQuery Mobile</h4> <p>某种程度上说,<a href="http://jquerymobile.com/">jQuery Mobile</a>就相当于移动应用版本的jQuery UI;它是一个挂件库,用来将语义化的HTML标记语言转化成无论UI样式还是交互行为都更贴近移动设备原生风格的模式。</p> <p>继承了jQuery的优点,jQuery Mobile对A、B、C三个等级的移动浏览器保持了全面兼容。它推出的时间不长,但目标很明确&mdash;&mdash;为尽量多的移动浏览器打造用户体验最棒的移动应用。虽然略重了些,但jQuery Mobile绝对是打造移动应用的最佳框架之一。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jquery-mobile.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-jquery-mobile" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jquery-mobile.jpg" style="width: 500px; height: 383px; " /></a></p> <div class="embed"><article id="node-280" class="node node-related-books" about="/node/280" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="jQuery Mobile即学即用" src="http://beforweb.com/sites/default/files/images/products/24.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">jQuery Mobile即学即用</a></h4> <p><a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着眼于移动Web应用开发实战,从应用结构和导航开始,介绍了jQuery Mobile的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,以及事件、配置及响应式布局API,最后向读者展示了一个完整的Web应用开发示例...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <div class="embed"><article id="node-281" class="node node-related-books" about="/node/281" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/jQuery-Mobile快速入门-布鲁林克/dp/B007TLW3KS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="jQuery Mobile快速入门" src="http://beforweb.com/sites/default/files/images/products/25.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/jQuery-Mobile快速入门-布鲁林克/dp/B007TLW3KS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">jQuery Mobile快速入门</a></h4> <p><a href="http://www.amazon.cn/jQuery-Mobile快速入门-布鲁林克/dp/B007TLW3KS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面。读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> jQTouch</h4> <p>与jQuery Mobile类似,<a href="http://jqtouch.com/">jQTouch</a>同样是一款将语义化HTML标记转化为移动设备原生风格页面视图的挂件库。这两者之间的区别是,jQTouch是特别为A级WebKit内核的移动浏览器打造的。这意味着jQTouch可以使用WebKit内核浏览器的专有功能渲染页面,相比于JM,所需的代码更少。所以,当我手头项目的目标用户多数为WebKit内核浏览器使用者的时候,我会选择jQTouch进行开发。</p> <p>很快,jQTouch将支持Zepto,届时,jQuery就不再是打造页面视图本身功能的唯一选项了。这个改变将会有效的减小文件尺寸,降低运算处理时的系统资源开销。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jqtouch.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-jqtouch" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jqtouch.jpg" style="width: 500px; height: 342px; " /></a></p> <h4> Sencha Touch</h4> <p><a href="http://www.sencha.com/products/touch/">Sencha Touch</a>是一个基于ExtJS的全功能挂件库。与jQTouch相同,Sencha Touch也是面向A级WebKit内核的移动浏览器的。基于ST打造的移动应用具有很强的健壮性,在UI方面的自适应性也很出色,例如,在平板电脑中,页面视图会切换至大屏幕规格,包括结构和元素的布局等。</p> <p>与jQuery Mobile或jQTouch不同的是,Sencha Touch不是基于HTML标记语言的,开发者必须采用客户端MVC风格直接书写JS代码,所以学习曲线略微陡峭。</p> <p>Sencha Touch比较适合开发那些主要运行在WebKit内核移动浏览器里的中到大型的Web应用<a href="http://beforweb" rel="eLink">。</a></p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sencha-touch.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-sencha-touch" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sencha-touch.jpg" style="width: 500px; height: 301px; " /></a></p> <div class="embed"><article id="node-283" class="node node-related-books" about="/node/283" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/Sencha-Touch权威指南-陆凌牛/dp/B0090CM6HE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="Sencha Touch权威指南" src="http://beforweb.com/sites/default/files/images/products/28.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/Sencha-Touch权威指南-陆凌牛/dp/B0090CM6HE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">Sencha Touch权威指南</a></h4> <p><a href="http://www.amazon.cn/Sencha-Touch权威指南-陆凌牛/dp/B0090CM6HE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书讲解了Sencha Touch的所有功能、特性、使用方法、开发技巧,让读者能做到对Sencha Touch了如指掌;它实战性强,不仅每个知识点都配有精心设计的小案例,而且还有综合性的案例,能让读者迅速获得实战经验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> SproutCore</h4> <p><a href="http://www.sproutcore.com/">SproutCore</a>同样是一款开源JS框架,最初的目的是帮助Web开发人员创建运行在桌面浏览器中的Web应用。实际上,它的功能太强大了,以至于苹果公司使用它来构建了最初版本的MobileMe.</p> <p>不过,源于它桌面应用的初始需求,SproutCore在尺寸方面对于真正的移动化解决方案来说还是略大了些,至少我最后一次用到它的时候是这样的情况。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sproutcore.jpg"><img alt="developers-guide-mobile-javascript-frameworks-sproutcore" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sproutcore.jpg" style="width: 500px; height: 331px; " /></a></p> <h3> 跨平台的本地应用开发工具</h3> <h4> PhoneGap</h4> <p><a href="http://www.phonegap.com/">PhoneGap</a>可以将基于标准HTML、CSS和JS打造的页面视图封装为本地客户端应用,目前支持10种移动平台。在数据资源传输方面,可以采用普通Web App所使用的Ajax等方式。PhoneGap在页面视图与本地应用之间提供了一个桥梁,允许开发者通过JavaScript访问并使用移动设备的硬件功能,比如摄像头、联系人信息、麦克风等;这是单纯依靠移动浏览器运行的Web App类应用所无法实现的。</p> <p>PhoneGap不属于挂件库,它也不会将HTML编译为原生客户端代码。通过PhoneGap封装的移动应用,只能在运行的过程中即时执行JavaScript,所以它无法像前面介绍的几种JS UI框架那样提供一套完整的移动化UI方案。但是PhoneGap的侧重点很显然是在本地化封装这方面;我开发过的每一个混合型应用都会用到PhoneGap。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-phonegap.jpg" rel="lightbox"><img alt="developers-guide-mobile-frameworks-native-phonegap" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-phonegap.jpg" style="width: 500px; height: 332px; " /></a></p> <div class="embed"><article id="node-282" class="node node-related-books" about="/node/282" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/PhoneGap开发指南-鲁尼/dp/B009AQ2XJG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="PhoneGap开发指南" src="http://beforweb.com/sites/default/files/images/products/26.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/PhoneGap开发指南-鲁尼/dp/B009AQ2XJG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">PhoneGap开发指南</a></h4> <p><a href="http://www.amazon.cn/PhoneGap开发指南-鲁尼/dp/B009AQ2XJG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书结合大量实例和代码对PhoneGap进行了详解,内容包括如何在不同平台上安装PhoneGap、构建以及调试应用程序,如何将移动Web转换为应用程序,如何管理跨平台代码库等。此外,本书介绍了移动JS库、CSS3的转场、变形和动画,以及如何使用PhoneGap访问设备感应器、使用摄像头、读写通讯录...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> Titanium Mobile</h4> <p><a href="http://www.appcelerator.com/products/titanium-mobile-application-development/">Titanium Mobile</a>可以直接将JavaScript编译为iOS或Android平台的本地应用代码。开发者们经常将它与PhoneGap做比较,其实它们的机制是截然不同的。在Titanium中,开发者需要按照它规定的语法书写应用代码,而无法使用原生JS;从这个角度讲,Titanium与前面提到的的Sencha Touch类似。对于资深JS开发者来说,这种方式不会带来很大困难,而新手则需要学习和适应。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-titanium-mobile.jpg" rel="lightbox"><img alt="developers-guide-mobile-frameworks-native-titanium-mobile" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-titanium-mobile.jpg" style="width: 500px; height: 387px; " /></a></p> <h4> Corona</h4> <p><a href="http://www.anscamobile.com/corona/">Corona</a>是一款商业SDK,使用Lua构建。开发者可以通过Corona为iOS和Android两大平台开发原生UI效果真实饱满的移动应用<a href="http://beforweb.com" rel="eLink">。</a>它拥有一个完整的图形和动画库,渲染引擎可以充分利用GPU的功能。这让Corana非常适合移动游戏的开发,不过它在普通移动应用开发方面的表现同样不错。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-corona.jpg"><img alt="developers-guide-mobile-frameworks-native-corona" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-corona.jpg" style="width: 500px; height: 297px; " /></a></p> <h3> 企业级移动应用开发平台(Mobile Enterprise Application Platforms,MEAPs&nbsp;)</h3> <p>MEAP一种整合性的开发平台,通过一个后台,对跨平台移动应用的开发项目进行全周期的管理;涉及到的细节已经超出本文范围。之所以把这类放进来,是因为其中<a href="http://rhomobile.com/">RhoMobile</a>曾经被视为PhoneGap的竞争对手,但实际上它们根本不是一回事。典型的MEAPs平台有:</p> <ul> <li> <a href="http://www.antennasoftware.com/">Antenna Softwware</a></li> <li> <a href="http://pyxismobile.com/">Pyxis Mobile</a></li> <li> <a href="http://rhomobile.com/">RhoMobile</a></li> <li> <a href="http://www.sybase.co.uk/products/mobileenterprise/sybaseunwiredplatform">Sybase Unwired Platform(SUP)</a></li> </ul> <h3> 总结</h3> <p>我个人从不会将Web应用与本地原生应用看作非此即彼的两个独立命题,它们更像是一个范围的两个极值。很多时候,要考虑的不是选择哪种方式的问题,而是要根据需求,评估基于HTML、CSS和JS打造的Web App页面视图部分与原生应用的比例问题。</p> <p>使用前文提到的一些方法对需求进行评估,确认可以使用混合型应用的模式开发产品项目,接下来,我建议将目标放在对页面视图部分的比例控制上。根据产品的具体需求和设计情况,在保证不会对用户体验等方面起到负面影响的前提下,可以尽量多的使用基于HTML的前端页面视图,以增大跨平台功能的比例。你需要担心的跨平台方面的问题越少,用来打造优秀产品的精力及资源就相对越多。</p> </div></div></div><ul class="field_categories"><li class="front-end taxonomy-term-reference-0"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/9" typeof="skos:Concept" property="rdfs:label skos:prefLabel">JavaScript</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/58" typeof="skos:Concept" property="rdfs:label skos:prefLabel">jQuery Mobile</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/59" typeof="skos:Concept" property="rdfs:label skos:prefLabel">jQTouch</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/60" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sencha Touch</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/61" typeof="skos:Concept" property="rdfs:label skos:prefLabel">PhoneGap</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel">框架</a></li></ul> Fri, 11 Nov 2011 14:08:02 +0000 C7210 22 at http://www.beforweb.com http://www.beforweb.com/node/22#comments 什么是响应式Web设计?怎样进行? http://www.beforweb.com/node/6 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-responsive-web-design-d.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>开始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始做Joomla文档翻译的;长假好时光,总会可以抽出一两天,安静的窝在家里做做博客、学做些新东西,简直没有比这更舒心的事情。</p> <p>说正事儿。准备在近期的几篇里集中翻译学习一下&ldquo;响应式Web设计&rdquo;的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!...),今天放上的这篇几乎花掉了两天的&ldquo;闲暇时间&rdquo;;对耐力是个考验,努力提高喽。废话结束,here we go.</p> <p>眼下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐,就是为iPhone、iPad、黑莓、Kindle...各自打造一款&mdash;&mdash;页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头?</p> <p>在Web设计和开发领域,很快的,我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的;结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。不过,或许会有另外一种方式,可以帮助我们避免这种情况的发生。</p> <p>响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 响应式Web设计的概念</h3> <p><a href="http://ethanmarcotte.com/">Ethan Marcotte</a>曾经在A List Apart发表过一篇文章&ldquo;<a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a>&rdquo;,文中援引了响应式建筑设计的概念:</p> <blockquote><p>最近出现了一门新兴的学科&mdash;&mdash;&ldquo;响应式建筑(responsive architecture)&rdquo;&mdash;&mdash;提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产&ldquo;智能玻璃&rdquo;:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。</p> </blockquote> <p>将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。</p> <p>显然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。</p> <h3> 调整分辨率</h3> <p>不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式,不断被研发着的各种新设备也将带来新的屏幕尺寸规格。有些设备基于竖屏(portrait),有些是横屏(landscape),甚至还有正方形;对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑,用户还可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况?</p> <p><img alt="responsive-web-design-screen-portrait-landscape" src="/sites/default/files/images/201110/responsive-web-design-screen-portrait-landscape.jpg" style="width: 550px; height: 300px; " /></p> <p>要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个大类,然后为每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是无比焦虑的,谁知道某类设备在5年之后的占有率是多少?而且<a href="http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/">很多用户甚至不去将浏览器的窗口最大化</a>;类似这样的变数,我们还要考虑多少呢?</p> <p>Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(<a href="http://www.quirksmode.org/mobile/mobilemarket.html">查看报告</a>),下图展示了大致的统计结果:</p> <p><img alt="responsive-web-design-screen-sizes" src="/sites/default/files/images/201110/responsive-web-design-screen-sizes.jpg" style="width: 550px; height: 300px; " /></p> <p>在08年之后,更多更有代表性的新设备问世并普及了。显然,我们不可以沿着&ldquo;多方案&rdquo;的思路继续走下去;那么我们应该怎样做呢?</p> <h4> 部分解决方案:一切弹性化</h4> <p>几年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很极端的情况下,仍会破坏布局。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等移动设备了。</p> <p>现在,我们可以通过响应式的设计和开发思路让页面更加&ldquo;弹性&rdquo;了。图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。</p> <p>在前文提到的Ethan Marcotte的文章中,他通过<a href="http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html">一个实例</a>展示了响应式Web设计在页面弹性方面的特性:</p> <p><img alt="responsive-web-design-flexible-demo" src="/sites/default/files/images/201110/responsive-web-design-flexible-demo.jpg" style="width: 550px; height: 321px; " /></p> <p>该实例的实现方式完美的结合了<a href="http://www.alistapart.com/articles/fluidgrids/">液态网格</a>和<a href="http://unstoppablerobotninja.com/entry/fluid-images">液态图片</a>技术,并且聪明的在正确的地方使用了正确的HTML标记。&ldquo;液态网格&rdquo;是一种很常见的实践方式;对于&ldquo;液态图片&rdquo;技术,下面的文章做了不错的介绍:</p> <ul> <li> <a href="http://zomigi.com/blog/hiding-and-revealing-portions-of-images/">Hiding and Revealing Portions of Images</a></li> <li> <a href="http://zomigi.com/blog/creating-sliding-composite-images/">Creating Sliding Composite Images</a></li> <li> <a href="http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/">Foreground Images That Scale With the Layout</a></li> </ul> <p>说到创建液态页面,最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》,或是下载个样章先:&ldquo;<a href="http://www.flexiblewebbook.com/bonus.html">怎样创建弹性图片</a>&rdquo;。另外,Zoe的这篇&ldquo;<a href="http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/">Essential Resources for Creating Liquid and Elastic Layouts.</a>&rdquo;提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。</p> <p>从技术角度讲,虽然听上去这些都简单可行,但它比&ldquo;将这些功能结合在一起&rdquo;要复杂些。举个例子,仔细观察Ethan Marcotte提供的实例中的logo图片:</p> <p><img alt="responsive-web-design-flexible-demo-logo" src="/sites/default/files/images/201110/responsive-web-design-flexible-demo-logo.jpg" style="width: 550px; height: 321px; " /></p> <p>如果我们将浏览器窗口不断调小,会发现logo图片的文字部分始终会保持同比缩小,保证其完整可读,而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分:插图作为页面标题的背景图片,会保持尺寸,但会随着布局调整而被裁切;文字部分则是一张单独的图片。</p> <pre class="brush:xml;wrap-lines:false;"> &lt;h1 id=&quot;logo&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;site/logo.png&quot; alt=&quot;The Baker Street Inquirer&quot; /&gt;&lt;/a&gt; &lt;/h1&gt;</pre><p>其中,&lt;h1&gt;元素使用插图作为背景,文字部分的图片始终保持与背景的对齐<a class="eLink" href="http://beforweb.com">。</a></p> <p>这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短,并且logo文字最终会变的小到难以识别,背景图片也会被过多的裁切。</p> <h3> 弹性图片</h3> <p>响应式Web设计的思路中,一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术,其中有不少是简单易行的。其中,由Richard Rutter最先尝试的一种做法比较流行,即使用CSS的max-width属性。这个方法在Ethan Marcotte的<a href="http://unstoppablerobotninja.com/entry/fluid-images/">液态图片</a>一文中也有提到。</p> <pre class="brush:css;"> img { max-width: 100%;}</pre><p>只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片的最大宽度值也会相应的减小,图片本身永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的<a href="http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/">CSS Media Query for Mobile is Fool&rsquo;s Gold</a>一文中提到的,&ldquo;液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。&rdquo; 一种简而美的方法。</p> <p>图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。</p> <h4> 响应式图片</h4> <p>由Filament Group提出的&ldquo;响应式图片&rdquo;技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下<a href="http://filamentgroup.com/examples/responsive-images/">demo页面</a>先。</p> <p><img alt="responsive-web-design-flexible-image-filamentgroup" src="/sites/default/files/images/201110/responsive-web-design-flexible-image-filamentgroup.jpg" style="width: 550px; height: 300px; " /></p> <p>这个技术的实现需要使用几个相关文件,我们可以<a href="https://github.com/filamentgroup/Responsive-Images">在Github上获取</a>。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考<a href="https://github.com/filamentgroup/Responsive-Images#readme">Responsive Images的说明文档</a>。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径&ldquo;/rwd-router&rdquo;。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的&ldquo;响应式图片&rdquo;,并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。</p> <p>这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。</p> <h4> 禁用iPhone中的图片自动缩放</h4> <p>在iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="responsive-web-design-iphone" src="/sites/default/files/images/201110/responsive-web-design-iphone.jpg" style="width: 550px; height: 400px; " /></p> <p>我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的&lt;head&gt;部分添加以下代码(详情可以参考<a href="http://thinkvitamin.com/design/responsive-design-image-gotcha/">Think Vitamin的相关文章</a>):</p> <pre class="brush:xml;"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;</pre><p>将initial-scale的值设定为&ldquo;1&rdquo;,即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹<a href="http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html">果官方的文档</a>。</p> <h3> 打造布局结构</h3> <p>当页面所需要适应的不同设备的屏幕尺寸差异过大时,除了图片方面,我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表,或者更有效的,使用CSS media query。这不会引起多大的麻烦,多数样式设定不会被影响和改变,只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。</p> <p>我们可以使用一个默认主样式表来定义页面的主要结构元素,比如#wrapper、#content、#sidebar、#nav等的默认布局方式,以及一些全局性的配色和字体方案。</p> <p>我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:</p> <p>下面的代码可以放在默认主样式表style.css中:</p> <pre class="brush:css;"> /* Default styles that will carry to the child style sheet */ html,body{ background... font... color... } h1,h2,h3{} p, blockquote, pre, code, ol, ul{} /* Structural elements */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } </pre><p>下面的代码可以放在子级样式表mobile.css中,专门针对移动设备进行样式覆写:</p> <pre class="brush:css;"> #wrapper{ width: 90%; } #content{ width: 100%; } #sidebar-left{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } </pre><p>大致的视觉效果如下图所示:</p> <p><img alt="responsive-web-design-moving-structure" src="/sites/default/files/images/201110/responsive-web-design-moving-structure.jpg" style="width: 550px; height: 600px; " /></p> <h4> Media Queries</h4> <p>CSS3支持CSS2.1所支持的所有媒体类型,例如screen、print、handheld等,同时添加了很多涉及媒体类型的功能属性,包括max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向,横屏或竖屏)和color。在CSS3发布之后出现的新玩具,如iPad或Android相关设备,都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式,而忽略那些不支持CSS3的台式机中的旧浏览器<a class="eLink" href="http://beforweb.com">。</a></p> <p>在Ethan的文章中,我们能看到一段media query使用实例:</p> <pre class="brush:xml;"> &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen and (max-device-width: 480px)&quot; href=&quot;shetland.css&quot; /&gt;</pre><p>代码本身可以很好的说明工作机制:如果页面通过屏幕呈现(非打印一类),并且屏幕宽度不超过480px,则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息,可以参考&ldquo;<a href="http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html">The Orientation Media Query</a>&rdquo;一文。</p> <p>我们可以创建多个样式表,以适应不同设备类型的宽度范围。<a href="http://www.alistapart.com/articles/responsive-web-design/">Ethan的文章</a>中的&ldquo;Meet the media query&rdquo;部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中:</p> <pre class="brush:css;"> /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } </pre><p>上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式,与通过media queries调用不同样式表的方式之间的区别与联系,可以参考&ldquo;<a href="http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries">Hardboiled CSS3 Media Queries</a>&rdquo;一文。</p> <h4> CSS3 Media Queries</h4> <p>上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值,不久的将来则一定会全部派上用场。</p> <p><strong>min-width</strong>和<strong>max-width</strong>这两个属性很靠谱。通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之。</p> <p>下面的几个示例中,我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述,这样做更加高效,减少请求数量。</p> <pre class="brush:css;"> @media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }</pre><p>上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。</p> <pre class="brush:css;"> @media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; } }</pre><p>而这段代码的作用则相反:aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。</p> <p>可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候,我们希望通过media queries作用于某种特定的设备,而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时,我们需要使用<strong>min-device-width</strong>与<strong>max-device-width</strong>,用来判断设备本身的屏幕尺寸。</p> <pre class="brush:css;"> @media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } }</pre><pre class="brush:css;"> @media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; } }</pre><p>还有一些其他方法,可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章:</p> <ul> <li> <a href="http://thomasmaier.me/2010/06/css-for-iphone-4-retina-display/">CSS for iPhone 4 (Retina display)</a></li> <li> <a href="http://thomasmaier.me/2010/03/howto-css-for-the-ipad/">How To: CSS for the iPad</a></li> </ul> <p>对于iPad来说,<strong>orientation</strong>属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。</p> <pre class="brush:css;"> @media screen and (orientation: landscape) { .iPadLandscape { width: 30%; float: right; } }</pre><pre class="brush:css;"> @media screen and (orientation: portrait) { .iPadPortrait { clear: both; } }</pre><p>不幸的是,这个属性目前确实只在iPad上有效。对于其他可以转屏的设备,譬如iPhone,可以使用min-device-width和max-device-width来变通实现;详情可以参考&ldquo;<a href="http://www.thecssninja.com/css/iphone-orientation-css">Determine iPhone orientation using CSS</a>&rdquo;一文。</p> <p>我们还可以将上述属性组合使用,来锁定某个屏幕尺寸范围:</p> <pre class="brush:css;"> @media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; } }</pre><p>上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。</p> <p>其实,很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发,其益处确实高于效率的损耗的话,那么这样做也完全不坏:</p> <pre class="brush:xml;"> &lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (max-width: 600px)&quot; href=&quot;small.css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (min-width: 600px)&quot; href=&quot;large.css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; media=&quot;print&quot; href=&quot;print.css&quot; /&gt;</pre><p>所以呐,凡事没有绝对,最好根据实际情况决定使用media queries的方式。比如,对于iPad,我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向,这种情况下,要保证页面在极短的时间内响应屏幕尺寸的调整,我们必须选择效率最高的方式。</p> <div class="embed"><article id="node-266" class="node node-related-books" about="/node/266" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div><span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-精通CSS3-德-Smashing-Magazine/dp/B00CJGM90C/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门-精通CSS3" src="http://beforweb.com/sites/default/files/images/products/10.jpg" /></a></span></div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-精通CSS3-德-Smashing-Magazine/dp/B00CJGM90C/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:精通CSS3</a></h4> <p><a href="http://www.amazon.cn/众妙之门-精通CSS3-德-Smashing-Magazine/dp/B00CJGM90C/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容是知名网页设计网站Smashing Magazine上关于CSS专题的知识及经验的分享,包含了许多资深网页设计师提供的各类实用技术、技巧和指南,内容涉及布局、响应式网页设计、字体排版、跨浏览器兼容性及其他的高级CSS技术...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> JavaScript</h4> <p>JavaScript也是我们的武器之一,特别是当某些旧设备无法完美支持CSS3的media query时,它可以作为后备支援。幸运的是,已经有专门的JS库来帮助旧浏览器(IE 5+,Firefox 1+,Safari 2等)支持CSS3的media queries。使用方法很简单,下载<a href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>并在你的页面中调用它。</p> <p>而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度,并为不同的情况调用不同的样式表:</p> <pre class="brush:jscript;"> &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function(){ $(window).bind(&quot;resize&quot;, resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // If width width is below 600px, switch to the mobile stylesheet if(newWindowWidth &lt; 600){ $(&quot;link[rel=stylesheet]&quot;).attr({href : &quot;mobile.css&quot;}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth &gt; 600){ $(&quot;link[rel=stylesheet]&quot;).attr({href : &quot;style.css&quot;}); } } }); &lt;/script&gt; </pre><p>类似这样的解决方案还有很多。所以我们要清楚,media queries不是一个绝对唯一的答案,它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript,我们则可以实现更多的变化。这篇&ldquo;<a href="http://www.quirksmode.org/blog/archives/2010/08/combining_media.html">Combining Media Queries and JavaScript</a>&rdquo;向我们展示了JavaScript配合media queries的更多细节信息。</p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 显示或隐藏内容</h3> <p>通过前文的学习,我们已经了解到,对于响应式Web设计,同比例缩减元素尺寸以及调整页面结构布局,是两个重要的方式方法。但是对于页面中的文字内容信息来说,则不能简单的只从&ldquo;同比缩小&rdquo;和&ldquo;调整布局结构&rdquo;这两方面去处理。对于手机等移动设备来说,在文字内容方面,已经有了很多最佳实践方式和指导原则:简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。</p> <p><img alt="responsive-web-design-digg-app" src="/sites/default/files/images/201110/responsive-web-design-digg-app.jpg" style="width: 550px; height: 425px; " /></p> <p>响应式Web设计的思想,一方面要保证页面元素及布局具有足够的弹性,来兼容各类设备平台和屏幕尺寸;另一方面,则是增强可读性和易用性,帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。</p> <p>有一条样式代码,我们已经使用了多年:</p> <pre class="brush:css;"> display: none;</pre><p>我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素,也可以使用前文的方法,通过JS判断当前硬件屏幕规格,在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如,对于手机类设备,我们可以隐藏掉大块的文字内容区,而只显示一个简单的导航结构,其中的导航元素可以指向详细内容页面<a class="eLink" href="http://beforweb.com">。</a></p> <p>注意,不要使用visibility: hidden的方式,因为这只能使元素在视觉上不做呈现;display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说,避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例:</p> <p><img alt="responsive-web-design-content" src="/sites/default/files/images/201110/responsive-web-design-content.jpg" style="width: 550px; height: 600px; " /></p> <p>图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:</p> <pre class="brush:xml;"> &lt;p class=&quot;sidebar-nav&quot;&gt;&lt;a href=&quot;#&quot;&gt;Left Sidebar Content&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Right Sidebar Content&lt;/a&gt;&lt;/p&gt; &lt;div id=&quot;content&quot;&gt; &lt;h2&gt;Main Content&lt;/h2&gt; &lt;/div&gt; &lt;div id=&quot;sidebar-left&quot;&gt; &lt;h2&gt;A Left Sidebar&lt;/h2&gt; &lt;/div&gt; &lt;div id=&quot;sidebar-right&quot;&gt; &lt;h2&gt;A Right Sidebar&lt;/h2&gt; &lt;/div&gt;</pre><p>下面是默认的主样式表,其中,我们要隐藏掉链接导航部分(sidebar-nav),因为默认样式适用的设备屏幕会足够大,足够显示包括两个侧边栏在内的所有内容。</p> <pre class="brush:css;"> #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } .sidebar-nav{display: none;}</pre><p>下面是用于小屏幕移动设备的样式表代码。现在,我们要隐藏掉两个侧边栏,并使sidebar-nav显示出来。借助JavaScript,当用户点击sidebar-nav中的链接时,对应的侧边栏可以恢复显示。当然,触发恢复显示的方式有很多种,即可以通过JS改变侧边栏的display属性值,也可以为其添加额外的布局样式。</p> <pre class="brush:css;"> #content{ width: 100%; } #sidebar-left{ display: none; } #sidebar-right{ display: none; } .sidebar-nav{display: inline;}</pre><p>现在,我们的页面已经可以随着设备和屏幕规格的变更,响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备,我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如,针对手机设备,使用一个特定的样式,将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读:</p> <ul> <li> <a href="http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/">Mobile Web Design Trends For 2009</a></li> <li> <a href="http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml">7 Usability Guidelines for Websites on Mobile Devices</a></li> </ul> <h4> 触屏与鼠标</h4> <p>触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品,比如手机,但是市场上越来越多的大屏幕设备也开始使用触屏技术;且不说iPad一类的平板电脑,就连一些笔记本和台式机也加入了这一行列。比如<a href="http://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=series_detail&amp;category=notebooks&amp;series_name=tm2t_series&amp;aoid=51320&amp;keyword=hp+touchsmart+tm2&amp;tafcjnef=fy10&amp;DS_KWID=p117477087">HP Touchsmart tm2t</a>,即使用传统的键鼠设备,同时也加入了触屏技术。</p> <p><img alt="responsive-web-design-touchscreen" src="/sites/default/files/images/201110/responsive-web-design-touchscreen.jpg" style="width: 550px; height: 368px; " /></p> <p>相比于传统的基于鼠标指针的互动,触屏技术显然带来了截然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。所幸,要使我们的设计方案同时满足这两类设备的规范,并非一件难事,只是有些地方需要注意。比如,触屏设备无法反映CSS定义的hover行为及相应的样式,因为它没有鼠标指针的概念,手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。</p> <p>有兴趣的话,可以读读这篇&ldquo;<a href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for Touchscreen</a>&rdquo;,这里提到的很多建议即有利于改进针对触屏设备的设计方式,同时也不会削弱传统键鼠设备上的用户体验。比如,放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作,而左手负责握住设备;这样,放在右侧的导航列表即方便右手的点击,又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-1"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/9" typeof="skos:Concept" property="rdfs:label skos:prefLabel">JavaScript</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/13" typeof="skos:Concept" property="rdfs:label skos:prefLabel">media query</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li></ul> Sat, 01 Oct 2011 13:05:19 +0000 C7210 6 at http://www.beforweb.com http://www.beforweb.com/node/6#comments