在webkit内的触摸事件主要有以下几个：
touchstart---->触摸开始
touchmove----->接触点改变
touchend------>触摸结束
touchcancel--->触摸取消
下面我主要针对我日常用的比较多的touchstart,touchend两个事件进行封装，使得其像jQuery类库一样方便使用。
代码如下：
首先是touchEvent.js文件
(function(window, undefined){
var TOUCHSTART, TOUCHEND;
if (typeof(window.ontouchstart) != 'undefined') {
TOUCHSTART = 'touchstart';
TOUCHEND = 'touchend';
} else if (typeof(window.onmspointerdown) != 'undefined') {
TOUCHSTART = 'MSPointerDown';
TOUCHEND = 'MSPointerUp';
} else {
TOUCHSTART = 'mousedown';
TOUCHEND = 'mouseup';
}
function NodeFacade(node){
this._node = node;
}
NodeFacade.prototype.getDomNode = function() {
return this._node;
}
NodeFacade.prototype.on = function(evt, callback) {
if (evt === 'tap') {
this._node.addEventListener(TOUCHSTART, callback);
} else if (evt === 'tapend') {
this._node.addEventListener(TOUCHEND, callback);
} else {
this._node.addEventListener(evt, callback);
}
return this;
}
NodeFacade.prototype.off = function(evt, callback) {
if (evt === 'tap') {
this._node.removeEventListener(TOUCHSTART, callback);
} else if (evt === 'tapend') {
this._node.removeEventListener(TOUCHEND, callback);
} else {
this._node.removeEventListener(evt, callback);
}
return this;
}
window.$ = function(selector) {
var node = document.querySelector(selector);
if(node) {
return new NodeFacade(node);
} else {
return null;
}
}
})(window);
其次在页面中引用该js文件
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="touchEvent.js"></script>
</head>
<body>
<input type="button" class="button" value="button" />
<script type="text/javascript">
$('.button').on('tap', function(e) {
e.preventDefault();
alert('tap');
}).on('tapend', function(e) {
alert('tapend');
});
</script>
</body>
</html>
一个比较突出的是iphone上submit按钮的默认风格，与我们设计师设计出来的不一样，这下设计师不高兴了。so为了搏妹子一笑，咱去找google先生。解决结果如下
.subtn{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
原来浏览器还有appearance这个属性，这个属性还相当的强大，只不过每个浏览器的默认风格差异很大。
下面这个情况做过移动web开发的都差不多遇到过，就是当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。但是，大部分情况下我是不需要这个高亮。解决方案：
.nav_a{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
这个关键在最后一个值0，意思是把颜色的alpha值为0。
做网站当然就少不了使用icons。现在国外现在很流行把图标转换成web字体，国内部分网站也有用，虽然这有它的优势；但这些也有不足之处，比如图标必须是纯色之类的。我这里主要说的是用图片做icon的时候，图片变得很虚。有问题，就有解决的方法：
.m_okhqb_header .dib {
35px;
height:30px;
background:url(http://s2.hqbcdn.com/mobile/v0/images/icons/sp_icos_2.png) no-repeat 0 2px;
background-size:50px auto;
}
上面的css重点在于sp_icos_2.png要比实际图片大一倍，再通过background-size去设置成其大小的一半，不过至于是不是一定要设置成其一半的大小，大家可以试试。
下面介绍三个相关布局的css属性，相当实用。
box-sizing 属性
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing有三个属性值content-box，border-box，inherit。这里我重点说下border-box。
当box-sizing的属性值为border-box时，表示通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。看下面的css代码：
.box {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
200px;
height:100px;
float:left;
padding:50px 50px 0;
}
这段css表示类为box的元素的总的宽度为200px，左右内边距为100px，而这个元素的内容宽度问100px。不知道这样大家能否理解，不理解的话可以自己亲自试试。再不懂可点《CSS3 box-sizing 属性》了解更多。可能大家会问这个到底有什么作用，它在移动站的响应式布局时，时常不知晓宽度的时候是非常有作用。
box-flex 属性
box-flex 属性规定框的子元素是否可伸缩其尺寸。（可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
box-flex </title>
<style type="text/css">
* {margn:0; padding:0;}
.box {
background:blue;
600px;
height:100px;
display:-webkit-box;
display:-moz-box;
display:box;
}
.box .p1 {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
background:yellow;
}
.box .p2 {
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
background:green;
}
</style>
</head>
<body>
<div class="box">
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>
在使用这个css属性的时候，一定要在其父元素上(这里就是.box)设置display:box;当然现在浏览器还不支持这个属性，所有必须带上私有前缀（-webkit，-moz...）。这个属性现在移动端也是非常好用的，特别是布局是平分的时候。
display:table 与 display:table-cell
第一个表示的是：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
第二个表示的是：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
这两个结合起来用，可以元素类是表格的布局。在移动端上这两个应该使用的频率也是蛮高。