1. 移动网页重构之道 _ 触屏篇

2. 触屏项目分类 项目总结 ( 分享 ) 工具使用 其他

3. WEBAPP NATIVEAPP+WEBAPP 单一页面

4. WEBAPP NATIVEAPP+WEBAPP 单一页面

5. 相同点与不同点 WEBAPP NATIVEAPP+WEBAPP 单一页面 使用的 “ APP” 模式，即：把所有页面 HTML 代码写在一起。框架： IUI 、 SENCHA 可以把某些功能模块放在一起，但建议暂时不放一起。 建议不合并，提高打开页面速度和流量

12. -webkit-tap-highlight-color:rgba(0,0,0,0); 取消 FOCUS 焦点框

13. 隐藏地址栏 addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); }); 当不满一屏时无效

14. text-overflow: ellipsis

15. 触屏项目分类 工具使用 其他 项目总结 ( 分享 )

17. 15.3k 20.6k 6.19k 充分利用伪元素 ::before,::after

18. 激活输入框时，将屏幕滚动到合适的地方 先拉键盘 获取焦点 滚动屏幕

19. 利用 flex box 布局，使中间自动伸缩 然后截断多余文字

20. 提高代码的互用性、可移植和后期迭代的维护性 迭代 1 迭代 2 迭代 2

22. 利用 CSS3 transform 实现指定区域滚动。推荐使用 ISCROLL 库

23. Touchstart 和 touchend 模拟 hover 状态

24. var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className =&quot;hover&quot;;}, false); myLinks[i].addEventListener('touchend', function(){this.className =&quot;&quot;;}, false); } .hover{ border:solid 1px #00f0ff; color:#ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(185,99%,69%)), color-stop(49%,hsl(190,80%,67%)), color-stop(50%,hsl(196,64%,65%)), color-stop(51%,hsl(188,77%,61%)), color-stop(100%,hsl(181,82%,78%))); }

25. 触屏项目分类 工具使用 其他 项目总结 ( 分享 ) 项目总结 ( 分享 ) 工具使用

27. less css coffee js

28. 避免重复造车轮子，自动化代码

29. 触屏项目分类 工具使用 其他 项目总结 ( 分享 ) 项目总结 ( 分享 ) 其他

32. 路走错了，奔跑是没有用的。

33. ☺ Thanks ！ 微博 :t.qq.com/imtank twitter:twitter.qq.com/imtank