HTML5跟触摸界面

习以为常了支出一流的面向电脑端浏览器的网站以开手机端网站要移动App的时光给诸多新的题目,这些新的问题,在我看来或多或少会给浏览者在应用网站还是App的时段带不好的用户体验,对于一个产品级应用,用户体验应该是于付出进程被首位也是不过要考虑的。这些问题,大部分是click事件带来的动方面的不足,这里大概总结记录,文中内容来自Stephen
Woods写的《HTML5沾摸界面设计与开发》这本书。

  1. 举手投足设备和桌面设备里的差异

    规则,也即是尺寸

    运动装备的计量能力不足

    众人用触摸设备的点子各异(现在多数智能手机都是触摸设备)    这也是本文主要涉嫌到的内容。

  1. 使PJAX提升Ajax触摸体验

    所谓的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事件 

相关文章