习惯了开发典型的面向电脑端浏览器的网站在开发手机端网站或者移动App的时候面对很多新的问题，这些新的问题，在我看来或多或少会给浏览者在使用网站或App的时候带来不好的用户体验，对于一个产品级应用，用户体验应该是在开发过程中最先也是最需要考虑的。这些问题，大部分是click事件带来的触摸方面的不足，这里简单总结记录，文中内容来自Stephen Woods写的《HTML5触摸界面设计与开发》这本书。

  1. 移动设备和桌面设备之间的差异

    规格，也就是尺寸

    移动设备的计算能力不足

    人们使用触摸设备的方式不同（现在绝大多数智能手机都是触摸设备）    这也是本文主要涉及到的内容。

  2. 使用PJAX提升触摸体验

    所谓的PJAX，就是用pushState和Ajax结合起来，Ajax负责更新内容，pushState负责更新URL。

    为什么不仅仅使用Ajax？

    大多数用户都知道URL是什么，这本书《HTML5触摸界面设计与开发》给出了一个忠告（或者在其他地方也可以看得到），破环链接是一个极大的错误。所以（我把这句话当成正确的，希望以后可以理解），如果用JavaScript去改变页面中的URL地址，当用户单击的时候，我们将会破坏所有的URL，更好的做法是使用HTML5浏览器历史API，因为保持链接的正确性才是最重要的。

    浏览器历史API

    想像一下，浏览器历史，就像一堆卡片一样，每一张卡片代表了用户曾经访问过的一个URL。浏览器历史是一个很大的栈，它存储了浏览器标签页的访问历史，这也是后退按钮能起作用的原因。浏览器历史API为我们提供了两个新的方法去操作这个栈：pushState和replaceState。

    pushState，允许我们在前面加入新的卡片，并且移除它前面所有的卡片。这和用户单击一个链接大致相同：它加入了一个新的状态项，如果它处在历史栈的中间位置，在它前面的所有链接都将丢失。replaceState允许我们替换当前的卡片，且并不影响栈的其他部分。浏览器历史API还提供了一个popstate的事件，它将在用户因使用"后退"或"前进"按钮而导致状态堆位置发生改变时候触发。

    1. 用pushState改变历史

      history.pushState方法有三个参数：状态、标题和URL，这里标题的参数目前没有任何浏览器支持，也不是指窗口的标题，所以只需要传null

    2. 监听popstate事件

转载于:https://www.cnblogs.com/1000px/p/4657779.html

HTML5与触摸界面相关推荐

  1. html5开发桌面界面设计,HTML5触摸界面设计与开发

    HTML5触摸界面设计与开发 编辑 锁定 讨论 上传视频 <HTML5触摸界面设计与开发>是人民邮电出版社于2014年出版的一本图书,作者是伍兹 (Stephen Woods).[1] 中 ...

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

    前言 在我写作时, 11.42%的网页流量来自移动设备.这个数字一年前是7%,三年之前是1.77%.虽然桌面设备还会陪伴我们一段时间,但是Web的未来是在移动设备上的. 对于Web开发者,支持移动设备 ...

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

    本节书摘来自异步社区<HTML5触摸界面设计与开发>一书中的第1章,第1.4节,作者: [美]Stephen Woods 更多章节内容可以访问云栖社区"异步社区"公众号 ...

  4. HTML5触摸界面的程序设计

    在移动端屏幕中,我们需要做的不只是和处理PC端网页那样,处理简单的点击事件或者其他桌面事件.我们需要更多的了解一下移动端的触摸事件和手势.--整理自<HTML5触摸界面设计与开发> 基于w ...

  5. 超声波技术构建触摸界面

    超声波技术构建触摸界面 Ultrasound tech builds touch interfaces 无论材料是什么,无论材料厚度如何,总部位于加州的创业公司UltraSense Systems声称 ...

  6. html5触摸界面设计与开发_原生APP的开发步骤主要分为哪些？

    移动APP的发展也来也好,APP的开发也是越来广泛,同时APP也是有这多种的开发方式.济南网站建设的小编在之前的文章"一起企业APP开发前首先要确定哪些?"中就有提到过APP开发模 ...

  7. html5 触摸 滚动,html5的触摸事件

    1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...

  8. html 禁止触摸事件,html5的触摸事件

    1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...

  9. html5 监控系统界面,基于WEB服务器实现监控系统的视频图像显示

    图3 嵌入式 WEB 服务器的应用软件结构 3.2.2嵌入式数据库mSQL 在本系统中,用户信息的存储,用户的登录登出,视频设备参数的存储与查询,视频文件的存储与查询等,都需要一个嵌入式数据库.综合考 ...

最新文章

  1. 中小企业CRM评测-客户服务_企能
  2. javaWeb三大框架总结
  3. php7 runkit,runkit - PHP 7 中文文档
  4. /dev/shm目录下产生大量的ora_$ORACLE_SID的二进制文件
  5. C#中字符与字符串（转）
  6. 俄罗斯方块是java_俄罗斯方块java
  7. java开发面试 自我介绍 与 项目介绍是重点
  8. h5(html5)+css3+移动端前端
  9. 典型的递归计算费氏数列
  10. Codeforces 1110D Jongmah dp
  11. 【基础】Flink -- DataStream API
  12. 什么是CSDN开源社区
  13. UCOS-II学习文档
  14. 管好自己，但行好事，不渡他人
  15. 据采集的三种方式-如何获取数据
  16. 科普系列--天气气象的监测和设备
  17. 每天学一点AS3.0(五)---声音的控制(5)
  18. SAP成都研究院小伙伴们2018～2019两年间的179篇原创文章合集
  19. Jenkins+tomcat安装笔记
  20. Mathorcup数学建模竞赛第六届-【妈妈杯】A题：水产养殖池塘综合研究（附一等奖获奖论文、lingo和matlab代码）

热门文章

  1. 虚拟linux无线网卡驱动安装失败,救命1 ：Atheros AR5212无线网卡驱动安装失败！！...
  2. 计算机组成原理实验箱连接显示输出,计算机组成原理实验箱介绍.ppt
  3. java视频教程enet网络,流媒体技术原理及播放方式（浅显易懂）
  4. Bootstrap 下拉菜单事件
  5. springMVC中获取request 对象
  6. 每次都错部分分怎么办，总是个别点TLE，WA
  7. NYOJ11 - 奇偶数分离
  8. 程序员的职业规划_大学毕业进入职场，程序员如何进行合理的互联网职业规划？...
  9. eigrp 扩散算法_EIGRP扩散更新算法-FC规则
  10. 分治法 ——查找问题 —— 寻找两个等长有序序列的中位数