1.如何选择触摸手势？
不要用滑动手势表示选择。因为在原生应用程序中这表示删除
不要更改操作系统默认手势。比如长按表示呼出内容菜单，双指捏紧为缩小，双击为放大。。除非你能重新实现相同的基本功能
2.怎样让界面“看起来”更块？
及时向用户反馈。比如进度条，过渡动画等等，此外图片淡入效果也能让人感觉变快（虽然实际上是变慢了）
3.媒体查询（media query）
IE8-不支持媒体查询。在移动端这并不影响什么，因为移动端至少是IE10
一般分界值：480px以下 ~ 手机浏览器；800px以上 ~ 桌面浏览器；480px到800px ~ 平板上的浏览器
4.使用合适的选择器（selector）
避免使用后代选择器。可以用class代替，因为浏览器解析CSS选择器是从右向左的，后代选择器存在很大的开销
5.用em还是px？
都可以。em流行过一段时间（2005年左右），因为当时浏览器有了改变字体大小的功能，用em做单位可以适应字体变化，后来IE7默认缩放方式变成了缩放页面上的所有元素，em就被遗忘了，现在px仍然是最简单粗暴的单位。而使用em还是px，都可以，或者说都不算太糟。
6.viewport有什么用？
viewport是用来限定视口（视窗）大小的。所谓视口就是浏览器给页面提供的容器（除去标题栏，工具栏，标签栏，状态栏等等），viewport有以下属性被广泛支持：
- width
- 设置viewport的宽度，默认值为980，允许的取值范围是200-10000
- height
- 设置viewport的高度，默认值是通过宽度和设备宽高比计算出来的，允许的取值范围是223-10000
- initial-scale
- 设置viewport的初始比例，默认值是通过计算使得整个页面在可见区域内，范围由minimum-scale和maximum-scale属性决定
- maximum-scale
- 设置viewport的最大比例，默认值是5.0，允许的取值范围是0-10.0
- user-scaleable（*注意后一个单词的写法*）
- 决定用户是否可以缩放视图，还可以防止文本开始输入时的滚动
可以像这样使用viewport属性：
<meta name="viewport" content="width=device-width">
自动适应设备宽度，在百分比布局时比较常用，比如顶部header需要100%宽度
7.为什么页面加载缓慢？
HTTP连接数过多（或者是大cookie）
总的字节数太大
等待时的渲染阻塞（外部CSS文件以及加载过程执行的js脚本）
延迟（3G网络大约有500ms延迟）
缓存能力差
8.为什么感觉动画特别卡？
尽量避免使用setTimeout动画。应该用transition来代替，因为CSS动画是在另一个线程中执行的（非js线程）
9.为什么fixed布局无法正常工作？
移动端的fixed布局必须添上viewport元信息width=device-width和user-scaleable=no，例如：
<head>
<meta name="viewport" content="width=device-width, user-scaleable=no"
</head>
防止用户缩放页面，影响页面布局
10.有哪些页面性能检测工具？
- YSlow，Yahoo!的小工具，能够给页面评分，给各项指标评级并给出优化建议
- PageSpeed，除了上面的功能外，还支持移动优化
上面提到的两个工具都有FF和Chrome插件
参考资料
- 《Building Touch Interfaces with HTML5》（《HTML5触摸界面设计与开发》）
