HTML5触摸界面设计与开发 读书笔记

发表于 更新于 分类于 本文字数： 840 阅读时长 ≈ 3 分钟

2018年10月读的H5的书籍，还没有读完

移动设备概述

移动设备的共同特点：先进的Web浏览器和触摸界面。

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

桌面设备开发网站的开发者最担心的是它们的网页能否兼容各种浏览器，所以开发者很大一部分的工作是理解各种浏览器之间的差异；移动领域的问题不在于各种浏览器，而在于不同的移动设备，当然几种不同的移动浏览器之间确实存在一些差异。

> 规格：只为一种尺寸的设备优化并不困难，困难的是要确保你的网站适用于所有的设备

> 移动设备的计算能力不足：

> 人们使用触摸设备的方式大相径庭：通常人们都是在做别的事情的间隙来使用它们，如果你的网站的载入时间有一点儿长，用户就会切换到别的标签去看其他的东西，然后再回来，但在手机上，用户永远不会给你这样的机会。

> 触摸界面

广泛使用的设备

操作系统：iOS，Android，WindowsPhone

设备规格：手机和平板电脑（那时候5.3英寸的属于平板）；硬件图形加速。

浏览器：webkit，windows手机运行IE10，还有Opera Mobile

HTML5

网页超文本技术小组（WHATWG）规定的标记语言和API集合。它通过定义能满足网络应用需求的功能。
规范：HTML5是一个动态的标准，允许在一个临时的基础上增加新的API和功能。
组件：html+css3+js

神秘谷：“谷”是机器人与人类相似程度与人类舒适度等级的映射关系的拐点。

在理想情况下，触摸界面给用户的印象是，直接操纵交互的东西。

用户界面只需让人感觉快，而无需真的快。只需及时响应——立即响应用户，让他知道有反应了。

创建一个简单的内容型网站

利用CSS3的新特性——媒体查询来避免分支。

选择一个观念：移动优先或置后

移动优先：即首先针对移动设备设计，然后调整使它适应桌面设备。

“移动置后”的缺点之一是移动设备需要下载和解析所有的桌面样式。如果采用“移动优先”，name移动设备可以安全地忽略那些不需要的样式。另外，这是一个需要逐一分析的问题。

  • 小技巧：
    • 代码量变大时，class会更容易管理，语法更简洁、干脆，更容易进一步开发
    • 由于需要网站能在最慢的手机上运行，当设计CSS选择器的性能时，我们需要非常挑剔，也就是说要避免使用后代选择器。(浏览器解析css选择器是从右向左的，也就是，如果它看到 “nav ul li a”，它首先必须获取所有匹配a的元素列表，然后检查看它是不是li的后代，再按相同规则继续检查。后代选择器虽然看起来方便，但它的性能开销是最大的)

//TODO 待续