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

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大致相同。我会提醒大家它们语法的不同点。

时间: 2024-08-29 09:17:25

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

《HTML5触摸界面设计与开发》——2.3 奠定基础的 < head >标签

2.3 奠定基础的 < head >标签 HTML5触摸界面设计与开发 代码清单2.2展示了加州鸟类网站的head标签 http-equiv 元信息 http-equiv 元信息告诉浏览器如何去做,等效于设置了HTTP 报头.这让你可以向浏览器传达一些原本由服务器告诉它的内容.当你不能控制服务器时,它特别有用.例如,如果你想设置一个缓存头,但又不能控制服务器,你可以使用http-equiv属性: <meta http-equiv="expires" content=&

《HTML5触摸界面设计与开发》——2.6 总结

2.6 总结 HTML5触摸界面设计与开发 在本章中,你学会了如何使用媒体查询来创建样式的分界点.你还学习了viewport 元信息和虚拟像素.请记

《HTML5触摸界面设计与开发》——导读

前言在我写作时, 11.42%的网页流量来自移动设备.这个数字一年前是7%,三年之前是1.77%.虽然桌面设备还会陪伴我们一段时间,但是Web的未来是在移动设备上的.对于Web开发者,支持移动设备是自21世纪初的Web标准革命以来最大的变革.移动设备都搭载了支持HTML5的现代浏览器.它们还装有容量较小的内存和缓慢的CPU,经常通过高延迟的网络来连接.而且它们几乎全都有触摸界面. 为移动设备开发就是为触摸开发.许多桌面Web开发中的技巧对于移动Web依然适用,不过有些却是完全不同-弄清楚这些不同

《HTML5触摸界面设计与开发》——1.4 神秘谷,是什么让触摸界面反应灵敏?

1.4 神秘谷,是什么让触摸界面反应灵敏? 我有个两岁半的儿子.他从一岁开始就能解锁iPad并找到他想要的应用程序.他还不会说话,就会解锁iPad.我与其他家长交流意见,发现并不是因为我的儿子智商超群.触摸界面给了孩子们直观的感受:触摸和移动东西,是人类做的最基本的事情之一.触摸界面直观又强大.但它也很容易令人失望. 有一个理论在机器人学里被称为"神秘谷":机器人看上去越像人,就越对我们有吸引力,但当机器人的外形快要逼近真人的时候,会让我们觉得很奇怪,甚至被吓得毛骨悚然."谷

《HTML5触摸界面设计与开发》——1.3 HTML5

1.3 HTML5 所有移动浏览器所共有的,为支持先进浏览器而存在的功能,被统称为HTML5.那究竟什么是HTML5? 严格地说,HTML5是指网页超文本技术工作小组(WHATWG)规定的标记语言和API集合.它通过定义能满足网络应用需求的功能,取代了HTML4,在HTML5提出伊始,就已经超越了HTML最初以文档为中心的模型. 实践中,HTML5已经成为一套标准化技术和新兴技术的代名词.这个新兴技术极大地拓展了传统的"Web堆栈"(HTML,CSS和JavaScript). 1.3.

《HTML5触摸界面设计与开发》——2.4 理解 Viewport

2.4 理解 Viewport 在iPhone诞生之前,手机浏览器尝试通过调整内容来适应网页,取得了不同程度的成功.iPhone上的Safari没有做丝毫的尝试,取而代之的是在各种各样的虚拟窗口上展现网页,这些虚拟窗口被称为"视图".用户可以通过放大来查看网页的部分内容或通过缩小来查看网页的全部内容. 为了给开发者提供一定程度的展现页面的控制权,苹果公司提供了viewport的元信息(meta)元素,它可以指定虚拟窗口大小.它改变了网站建设的很多方面.理解viewport是成功建设移动

《HTML5触摸界面设计与开发》——1.5 总结

1.5 总结 触摸设备总体上在不断变化,大部分Web浏览器之间的差异是很小的.虽然在性能上的差异较大,但只用HTML5就足以在触摸设备上做出优秀的用户界面. 鉴于触摸设备的性质,速度快是至关重要的.为了让它看起来更快,最重要的是要及时反馈用户.

《HTML5触摸界面设计与开发》——2.2 创建标记

2.2 创建标记 对于这个网站,我们会用"移动置后"的方案来编写,但我们会在移动版和桌面版上使用相同的标记.我们将专注于语义标记,因为网站需要在移动设备上工作,所以我们还得考虑DOM和CSS的性能. 注: "移动置后"的缺点之一是移动设备需要下载和解析所有的桌面样式.如果采用"移动优先",那么移动设备可以安全地忽略那些不需要的样式.另外,这是一个需要逐一分析的问题.为一个文档创建标记时,我把它分成区域,这样不仅有合理的语义,而且在设计和添加样式时

java-web开发,jsp界面设计出错

问题描述 web开发,jsp界面设计出错 <%@ page language="java" pageEncoding="gbk"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+