[iOS]制作native-like的webapp时的一些要点

当用户tap一个页面元素时,iOS会在元素周围显示橙色的外框,以表明该元素被tap了。如果你想自己实现tap时的响应效果,可以用以下方法“去除”这个高亮效果。(来源)

-webkit-tap-highlight-color: rgba(0,0,0,0);  

禁止用户选择页面文字:(来源)

-webkit-user-select: none;

如果你响应onclick事件,会发现click事件有大约半秒的延迟,这是因为iOS需要等待一段时间来判断用户是点击还是拖动。如想去掉这个延迟,可以用ontouchstart代替onclick:(来源)

$(".button").bind("touchstart", handler);

但这样在桌面浏览器中鼠标点击操作就不要用了。没关系,可以做一下判断。

if ('ontouchstart' in window) {
    // mobile version
    $(".button").bind("touchstart", handler);
} else {
    // desktop version
    $(".button").bind("click", handler);
}

禁止用户拖动页面:(来源

document.ontouchstart = function(e){ 
    e.preventDefault(); 
}

一些其他的信息:这里

Posted in web

Tags: , , ,

Permalink 1 Comment

One response to “[iOS]制作native-like的webapp时的一些要点

  1. fcicq

    关于 #3, fastclick 会把这些事情处理的更好一些, http://labs.ft.com/2012/08/fastclick-redux/

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类目录

文章归档