HTML5与触摸界面

习惯了开发典型的面向电脑端浏览器的网站在开发手机端网站或者移动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事件