【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发

【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》。

以下为全部译文：

我（51CTO注：Sam Gentile）曾提过两个关键概念，它们对于用这些技术来开发移动应用程序而言极为重要：

1. 视图元标签（Viewport Meta Tag）
2. CSS媒体查询（CSS Media Queries）

虽然我介绍了这两个重要的基本概念，但当时还处在边学习边摸索的阶段，所以现在觉得那时给出的上下文和解释不够（我举了一个媒体查询的例子，却没有定义媒体查询、也没有交待媒体查询的用途！）本文试图弥补一些缺憾。

上面这番话没错，但主要还是看你在构建哪种类型的应用程序。如今大家之所以对HTML5、CSS3及相关的JavaScript API抱有如此高涨的兴趣，原因完全在于，大家不想构建“原生”的移动应用程序，至少在企业领域不想这么做。原生移动应用程序需要你为每一种平台学习不同的编程语言和集成开发环境（IDE）。相反，我们大多数人都想重复运用我们在构建“Web应用程序”方面已经掌握的现有技能，可以重复使用一些代码。这属于“Hybrid”或“纯粹”的移动应用程序这个类别。如果你不需要访问设备的原生功能，就可以只用HTML5和CSS3来构建一个“纯粹”的移动Web应用程序。但是这种情况并不多见。这种类型的应用程序在充分利用那些设备上的原生传感器和API方面本领有限。虽然一些功能（如地理位置）提供给了移动浏览器，但还是有许多功能并没有提供，比如方向感应器或视频。不过好消息是，大行其道的Web编程让HTML5、JavaScript和CSS能够在某种程度上“走原生道路”。PhoneGap和Titanium Appcelerator等流行的框架让你能够使用HTML5和JavaScript，为iOS、Android和Windows Phone开发原生应用程序，另外还可以访问设备。因而，“ Hybrid App”随之出现。

我谈论了视口和媒体查询，但是基于所谓的自适应或响应式Web应用程序这一上下文，这类应用程序可以随不同的设备而按比例增加或缩减。最近出现了几个变化，让 Hybrid App开发成为了可能：

• 移动标签让移动浏览器不要按比例缩减你的站点
• 新标准大大简化了构建可在多种移动浏览器中正常运行的站点这一任务
• 新标准使得构建的站点运行起来更像Web应用程序。

这些标准包括HTML5标准系列和CSS3。我在此探讨HTML5。

我之前谈论了视口元标签：那么，什么是视口元标签呢？视口元标签由苹果Mobile Safari引入，目的是为了让Web开发者可以控制视口的比例和大小。现在它成了一项普遍的标准。除非你另有要求，否则iPhone上的Safari会假设你的页面宽度是980px。如果你想为iPhone和尺寸比较小的BlackBerry设备进行移动Web开发，就得让Mobile Safari（或面向BlackBerry的Ripple）知道这一点，为此需要把视图元标签添加到HTML文档中根据设备宽度来设定的头部分：

    

     
<meta name="viewport" content="user-scalable=no, width=device-width" />

我当时举了一个媒体查询的例子，但未作深入讨论！

    

     
<link rel="stylesheet" type="text/css" href="iphone.css"
     
media="only screen and (max-width: 480px)" />

媒体查询（CSS3的新增特性）功能很强大，我鼓励各位读一下Dan Wahlin所写的 这篇博文，详细介绍了媒体查询；不过大体意思是，它们是一种可以评价为真或假的CSS表达式。如果是真，就会运用表达式的CSS选择器和属性。如果与CSS级联规则结合使用，它让你能够响应不同的分辨率、方向或者分辨率或方向的变化。这个规则实际上是说“对设备最大宽度是480px的移动设备来说，就运用iPhone样式表。”

同样，这篇博文只是触及了这整个方面的皮毛，但愿弥补了一些缺憾，并且阐述了视口和媒体查询，这是用HTML5、JavaScript和CSS3来构建 Hybrid App的两个基本概念。我打算以后更深入地介绍这些内容。

原文地址：http://samgentile.com/Web/html5-css3-jquery/hybrid-mobile-applications-with-html5-javascript-and-css3/