解析:创建移动Web应用的技巧
2011-12-27 10:05:22  来源:e800  作者:粟薇 编译  编辑:王鲲鹏  
移动Web应用是本地应用的移动版本。现在,安卓产品和iOS设备(iPhone和iPad)都带有非常炫目的移动浏览器(分别为移动Chrome和移动Safari),而Opera的粉丝也可以安装自己喜欢的浏览器。

移动Web应用是本地应用的移动版本。现在,安卓产品和iOS设备(iPhoneiPad)都带有非常炫目的移动浏览器(分别为移动Chrome和移动Safari),而Opera的粉丝也可以安装自己喜欢的浏览器。

从桌面的角度而言,这些产品增加了网页浏览的乐趣。CSS3和漂亮的HTML5和装饰意味着用户可以获得最佳的浏览体验。

快速加载的JavaScript结合了令人印象深刻的CSS3HTML要素,这意味着你的移动版浏览器可以和电脑上的应用一样提供丰富的浏览体验。

移动与Web的结合肯定会带来性能方面的顾虑。基于Web的移动应用有一个优势,那就是你可以在下载应用的时候下载很多界面,这样你只在使用它们的时候加载相关数据。此外,本地应用可以利用平台的综合开发特性(如标准用户界面),这样就可以进一步提升性能。

基于Web的移动应用运行起来应该和电脑上的网页应用一样,例如,当用户请求查看网页时,你可以加载页面内容。我们可以使用浏览器缓冲为有待发缓冲的用户提速,但是所有的图片,脚本和数据都是从Web服务器加载的。

移动Web应用VS移动网站

现在,越来越多的在线产品都推出了移动版本,而移动版本是优化后的缩小版页面,适合小屏幕显示。移动版本的网站通常会获取网站内容然后输出,这样移动设备上的信息显示就更容易。

image001

CSS媒体查询和其他性能检测技巧可用来确定设备或是浏览器视口的特定性能,这样程序员就可以选择用相同代码呈现内容。

移动Web应用在特定方面也类似,因为你希望内容受到访客喜爱且被他们接受。

虽然移动Web应用与移动版本的网页有区别。其用户界面会更具自定义特征,会加入更多以移动设备为核心的用户界面,从下面的例子中就可看到一些迹象。

image002

浏览过上面的移动Web应用,可以看出用户界面被高度自定义目的是适应移动平台。他们的点击区域更大,指触效果更好,易于操作。YouTubeiPlayer示例使用宫格按钮的布局,和本地移动应用一样显示应用中的控件。

看下面的示例,通过比较YouTubeiPlayer Web应用以及iPhone Sky体育新闻的本地应用,可以看到应用表单及其用户界面之间的相似性。

image003

第1页/4页 1 2 3 4  后一页
本文关键字: 移动Web 安卓 iOS 浏览器
相关文章