《HTML5触摸界面设计与开发》——第 1 章 移动设备概述1.1 触摸设备和桌面设备之间的差异

简介:

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

第 1 章 移动设备概述

一切都因iPhone开始。在这之前,手机网页就是其桌面网页的简化版。极少数浏览器能够支持JavaScript,大多数浏览器只是将网页转化成适合小屏幕而已。iPhone上的Safari是一个真正的Web浏览器,它支持JavaScript和CSS。不仅如此,它还是一个非常前沿的浏览器。为iPhone设计的网站可以使用一些新生的工具套件,即现在的HTML5。 如今,市面上有数百种的移动设备在售。它们千差万别,各有千秋,但它们有一个共同的特点:先进的Web浏览器和触摸界面。

1.1 触摸设备和桌面设备之间的差异

大多数触摸设备是移动设备。为桌面设备开发网站的开发者最担心的是它们的网页能否兼容各种浏览器。所以,开发者很大一部分的工作是理解各种浏览器之间的差异。

移动领域问题不在于各种浏览器,而在于不同的移动设备。当然,有几种不同的移动浏览器,并且它们之间的确存在一些差异,但大体上移动设备版本与其相应的桌面版本差异不大。移动设备和桌面设备真正差异在于以下4个因素:

  • 规格
  • 计算能力不足
  • 人们如何使用它们
  • 触摸界面
    1.1.1 规格

移动设备和台式电脑(或笔记本电脑)之间最明显的差异是尺寸。移动设备的尺寸比较小,所以搭载较小屏幕,且没有鼠标,大多数情况下也没有键盘。

触摸设备目前主要有三种规格:手机、小型平板和大型平板。大型平板包括iPad(不包括iPad mini)和各种10英寸的Android平板,如Nexus10。小平板屏幕一般约为7英寸,如Nexus7、Galaxy Note和iPad mini。

所有这些设备上的浏览器始终都是全屏的。用户“调整”浏览器大小的唯一途径是通过旋转移动设备在横向和纵向模式之间进行切换。只为一种尺寸的设备优化并不困难,困难的是要确保你的网站适用于所有的设备。

1.1.2 移动设备的计算能力不足
写本书时,最强大的触摸屏设备是第四代iPad。它是性能强大的机器。根据相同的标准,它的性能与2004年发布的Power Mac G5(最后一代摩托罗拉版)相同。

可以肯定地说,大多数用户并没有使用最新和最强大的移动设备。大多数运营商提供“合约”手机,如iPhone 4和三星Galaxy Exhilarate,这些手机的运行速度要慢得多。它们的CPU性能和20世纪末、21世纪初最快的台式电脑差不多。iPhone 3GS仍然被广泛使用,它拥有单核处理器、256 MB的内存,CPU性能大致相当于最后一代与CRT显示器搭配销售的iMac。虽然移动设备的性能仍在继续增长,但与一般桌面电脑的性能相比,它们还是太慢了。值得高兴的是,大部分近期发布的设备都拥有独立的GPU。一个iPhone 4在性能上可以被认为是一台装有强大图形处理器,但性能稍逊的电脑。

1.1.3 人们使用触摸设备的方式大相径庭
人们使用手机和桌面电脑的习惯不同。人们使用桌面电脑一般是为了完成特定的工作,所以可能不会做很多其他的事情。至于移动设备,不论是手机还是平板电脑,通常人们都是在做别的事情的间隙来使用它们。他们可能正在乘坐公交车、排队等候或只是在参加一个无聊的会议。

例如,你搭建了一个财经新闻网站。在桌面电脑上,用户可能会花费一段时间单击几次链接,然后用几分钟的时间阅读一篇文章。而移动用户可能正在做一件别的事情,只会在空闲时的几秒时间来完成上面的操作。桌面网站的速度一般不慢,且桌面用户的容忍时间更长。如果你的网站载入时间有一点长,用户就会切换到别的标签去看其他的东西,然后再回来。但在手机上,用户永远不会给你这样的机会。

移动设备就是触摸设备

所有在售的新型智能手机和平板电脑有着一个非常重要的共同特点:它们都具有触摸界面—在大多数情况下,还可以多点触控。合适的大小、美观的屏幕以及其他的先进功能,这些功能相对于使用触摸屏这样的革命性革新,都只是微小的改进而已。

相关文章
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
304 4
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
306 0
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
10月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
346 7
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
移动开发 HTML5
HTML5概述
【8月更文挑战第22天】
93 1
|
数据采集 移动开发 前端开发
《智慧的网络爬虫》— HTML概述
网页是构成网站的基本元素,它是一个包含HTML标签的纯文本文件,通常是由图片;链接;视频;声音;文字等元素组成。通常我们所看到的网页,常以 .htm 或 .html 后缀结尾的文件,因此将其俗称为HTML文件。HTML;CSS;JS是学习爬虫的基础,是必须要了解的,此篇文章我讲述了HTML5对于爬虫所要必备的基础知识
129 1
《智慧的网络爬虫》—  HTML概述
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
167 1
基于HTML5开发的Markdown在线编辑器
|
移动开发 前端开发 JavaScript
HTML定义与概述
HTML定义与概述
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
107 2