《HTML5触摸界面设计与开发》——1.2 广泛使用的设备

简介:

本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第1章,第1.2节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 广泛使用的设备

在2007年,iPhone刚出现时,没有任何一部其他的手机拥有真正能触摸感知的Web浏览器。也没有任何支持多点触摸的设备。其他的智能手机大多数使用手写笔进行交互,当时市场上的几种平板电脑也是一样。今天,市面上流通的有数百种触摸设备。我们不可能了解每一种新设备,不过它们可以根据操作系统、规格、搭载的Web浏览器将它们分为几类。

1.2.1 操作系统
如今市场上有四种主要的操作系统适用于触摸设备:

  • iOS
  • Blackberry OS
  • Android
  • Windows 8

Android是目前最流行的手机操作系统。根据International Data Corporation (IDC)的数据, 2012年第三季度智能手机出货量的75%运行的是Android系统,14.9%运行的是iOS系统。其他操作系统的市场份额只有个位数(这不包括的Windows Phone 8,因为它在2012年10月才发布)。

iOS
iOS是所有苹果手机和平板运行的操作系统。因为苹果控制着硬件,所以所有的iPad和iPhone能以相同的方式运行,只有大小和处理能力上的差异。苹果推出软件更新时无需依赖运营商,这意味着,苹果设备更容易运行最新版本的操作系统。iOS开发者,David Smith,发现他开发的应用程序的用户中,有79.2%正在使用的iOS 6或更高版本(相对2012年12月)的操作系统,有94%的人正在使用5.1或更高版本的操作系统。

注: David Smith 会在他的网站(david-smith.org/iosversionstats/)上更新这些统计数据。
苹果随着操作系统的升级同步升级浏览器,它不允许用户安装不同内核的浏览器。至少现在,可以认为iOS用户主要安装着上一个较新版本的iOS和iOS Safari。

ANDROID
Android的情况很不一样。Android是开源的,手机厂商有权自由定制成他们认为合适的样子,所以在手机之间实际的用户界面差异很大。

Android有三个主要的版本:2、3和4。Android 3.0(蜂巢)是平板专用操作系统。大约50%的Android手机运行着2.3.x(姜饼)。最新版本的Android 4.1(果冻豆)并没有被广泛使用,在2013年1月,只有不到10%的设备在运行它,不过这一数字正在迅速增长。时下的“旗舰”手机,如Samsung Galaxy SIII,仍然搭载着Android 4.0.x(冰淇淋三明治)系统出售。 Android 4.1同时支持平板电脑和手机。

注: 谷歌在developer.android.com/about/dashboards/提供了各版本的统计
Android包括一个默认的浏览器,而且允许让用户安装不同的浏览器。4.1版之后,Android上默认的浏览器改为了Chrome。

Kindle Fire
Amazon Kindle Fire运行着高度定制版的Android,这个定制后的版本不包括任何原生的Android应用程序,并拥有自行研发的浏览器,称为Silk。值得注意的是,Silk因其在客户端设备和Amazon云上的运行能力而知名。这样可以显著地提高性能,尤其在高延迟的网络链接下。这对开发者有一些影响,我们将在第4章“提高下一次的访问速度”中阐述。

BLACKBERRY OS
Blackberry手机是最早真正获得成功的智能手机。但到了2012年12月,其市场份额已经迅速减少至大约4.3%。Blackberry也出售平板,称为Playbook。这两种设备使用相同的基于WebKit的网页浏览器。尚存的非触摸屏式的黑莓设备占据着智能手机市场的长尾。 WINDOWS Windows Phone 8包含了微软第一个完全触摸式的浏览器。这款手机配备了内置的Internet Explorer 10,也有创建运行于HTML5环境的应用程序的能力。

1.2.2 设备规格
桌面和移动设备之间最显著的差异是规格。移动设备有两种主要的规格:手机和平板电脑。

手机
最常见的触摸设备是智能手机。除了极少数例外,它们都具有相同的基本规格:呈矩形并有纵向的触摸屏。开发手机网站时要考虑的最重要的事就是小尺寸的屏幕。需要保证交互元素的尺寸足够大到可以用手指来操控,并且内容能在小屏幕上展现得合适。

平板电脑
平板电脑的类型更多样化。它们中从微型的Galaxy Note(5.3英寸屏幕)到13英寸的Windows 可变形平板电脑。有些平板电脑,比如iPad,通常在纵向方向使用。其他的则是在横向模式下使用。就像手机一样,所有平板电脑都装有全屏的浏览器。

尽管有着这样的区别,但实际使用中的平板电脑是差不多的:iPad的销量超过了所有的竞争者,并稳定赢利。在其他的制造商中,唯一拥有两位数市场份额的是三星。平板电脑最流行的规格是10英寸(如iPad)和7英寸(如iPad Mini和Kindle Fire)。

硬件图形加速
正如之前所提到的,一部iPhone在性能上可以被认为是一台装有不错的显卡但性能稍逊的电脑。各个设备的CPU和内存各异,图形硬件也是这样。在Android 3.0之前,浏览器完全没有图形硬件加速功能。这意味着,某个动画的效果可能会在iPhone 5上流畅,但在运行Android 2.3.3的旧手机上不会同样流畅。

目前所有的移动设备在绘图上,都使用所谓的“共享内存”。与桌面电脑上的显卡不同,移动设备上的图形硬件没有专用的内存,只是共享系统内存。这意味着,随着越来越多的东西被添加到图形存储器,系统可用的内存会越来越少。在我们随后讨论图形加速时,牢记这一点很重要。

1.2.3 浏览器
幸运的是,浏览器的情况远没有移动设备复杂。WebKit无疑是最流行的移动浏览器内核,它支撑着所有的苹果、Android和黑莓设备的默认浏览器。Windows手机运行IE 10。最流行的另类手机浏览器是Opera Mobile,但只有不到1%的市场份额。

WebKit
WebKit起源于名为Konqueror的开源浏览器的引擎。苹果将它进一步开发为WebKit,作为Safari背后的浏览器引擎。WebKit的是一个非常强大的引擎,也是第一代iPhone如此成功的原因之一。在Android 4.1之前,一个通常被称为“Android Browser”的基于WebKit的浏览器被安装在了Android设备上。4.1时,它被同样是WebKit 内核的“Chrome for Android”浏览器取代。

基于WebKit内核的浏览器比较相似,但又不完全相同。不同的WebKit的浏览器之间的渲染行为非常近,不过因为存在一些小的分支,所以在功能支持上有很大不同。当它们出现差异时,我会提醒大家。

iOS Safari
iOS版的WebKit是iOS上唯一允许的浏览器引擎。它通常通过Safari浏览器运行,也可以在原生应用程序中通过Cocoa UIWebView类运行。

Android Browser
Android Browser,即在Android中名为“浏览器”的应用,是Android内置的浏览器。它是基于WebKit的,而不是Chrome。Android浏览器的功能在不同版本中有很大差异。令人惊讶的是,并不是越新版本的浏览器有越多的功能。Android 2.3.3的浏览器在某些方面比4.0.1功能更全面。我稍后会指出它们之间的差异。

Android版的Chrome
Android版的Chrome通常比桌面版Chrome的稳定分支落后一个版本。在Android 4.1上,Chrome已取代了先前的原生浏览器。

Windows版的IE10
IE10不同于所有先前版本的Internet Explorer,它与WebKit的功能相同或相近。IE10有完全不同的触摸事件API,但功能是相同的。

其他浏览器
还有许多其他的浏览器。最流行的是Opera Mobile和Firefox移动版,它们都适用于Android。这两种浏览器都非常强大,能实现的功能与WebKit大致相同。我会提醒大家它们语法的不同点。

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
34 0
|
9天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
4月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
100 1
|
3月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
35 1
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
45 0
|
4月前
|
JavaScript 前端开发
基于html+javascript开发的base64解码工具
base64在线解码工具可以帮助你将Base64编码的字符串解码为原始的文本或数据。
28 0
|
5月前
|
移动开发 资源调度 JavaScript
html2canvas 一个强大的使用js开发的浏览器网页截图工具
html2canvas 一个强大的使用js开发的浏览器网页截图工具
41 0
|
5月前
|
Web App开发 设计模式 JavaScript
基于html+jquery开发的科学计算器(课程作业)
基于html和jquery开发的科学计算器,该科学计算器可进行乘方、开方、指数、对数、三角函数、统计等方面的运算,又称函数计算器。 科学型带有所有普通的函数,所有的函数都分布在键盘上以致于你可以不用通过菜单列表来使用它们。
26 0
|
6月前
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
36 0
|
6月前
|
存储 搜索推荐 数据可视化
基于html5+javascript技术开发的房贷利率计算器,买房的码农们戳进来
房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。
54 0