重构之道 触屏篇
TRANSCRIPT
移动网页重构之道 _ 触屏篇
触屏项目分类
项目总结 ( 分享 )
工具使用
其他
WEBAPP NATIVEAPP+WEBAPP 单一页面
WEBAPP NATIVEAPP+WEBAPP 单一页面
相同点与不同点
WEBAPP NATIVEAPP+WEBAPP 单一页面
使用的“ APP” 模式，即：把所有页面 HTML 代码写在一起。框架：IUI 、 SENCHA
可以把某些功能模块放在一起，但建议暂时不放一起。
建议不合并，提高打开页面速度和流量
• 所有触屏都加上1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
2. <meta name="format-detection" content="address=no;email=no" />
• W E B A P P 加上 L IN K <link rel="apple-touch-icon-precomposed" href="icon.png" >
<link rel="apple-touch-startup-image" href="startup.png" />
• 横竖屏样式<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> // 风景模式样式
• 阻止旋转屏幕时自动调整字体大小-webkit-text-size-adjust:none;
• 禁止内容选中 -webkit-user-select:none;
• 禁止图片保存-webkit-touch-callout:none;
http://w3help.org/zh-cn/causes/BX2050
• 关闭自动识别后 , 又希望某些电话号码能够链接到拨号功能 , 可以通过这样来声明
•<a href="tel:0755-86013388"> 打电话给我 </a>•<a href="sms:1867551***6"> 发短信 </a>•(<a href="sms:1867551***6,13552262668?body= 发消息给我 "> 发短信 </a>)•或用于单元格：•<td onclick="location.href='tel:110'">
• 自动大写与自动修正•<input type="text" autocapitalize="off" autocorrect="off" />
•前缀 -webkit-gradient -moz-gradient 先写私有前缀，在写标准。 -webkit-border-radius:6px; border-radius:6px; 圆角大小不同需要分开书写，否则无效果！ -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; ... border-radius:6px 0 0 6px;
CSS3 书写顺序和私有前缀
•DOM 节点过多 动画效果无效 （ andriod ）
• 不建议整页动画，建议针对局部动画。或者避免使用动画效果
• -webkit-transform:translateX(-100%);-webkit-transform:translate(-100%,0);
CSS3 动画
-webkit-tap-highlight-color:rgba(0,0,0,0);
取消 FOCUS 焦点框
addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100);});
当不满一屏时无效
隐藏地址栏
t e x t -o v e r f lo w : e l l ip s is
触屏项目分类
工具使用
其他
项目总结 ( 分享 )
• http://house.3g.qq.com/html5/down.jsp
15 . 3 k 2 0 . 6 k 6 . 19 k
充分利用伪元素充分利用伪元素 ::before,::after::before,::after
激活输入框时，将屏幕滚动到合适的地方
先拉键盘 获取焦点 滚动屏幕
利用 flex box 布局，使中间自动伸缩然后截断多余文字
迭代 1 迭代 2 迭代 2
提高代码的互用性、可移植和后期迭代的维护性
利用 CSS3 transform 实现指定区域滚动。推荐使用 ISCROLL 库
Touchstart 和 touchend 模拟 hover 状态
var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className ="hover";}, false); myLinks[i].addEventListener('touchend', function(){this.className ="";}, 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%))); }
触屏项目分类
工具使用
其他
项目总结 ( 分享 ) 项目总结 ( 分享 )
工具使用
less css
coffee js
避免重复造车轮子，自动化代码
触屏项目分类
工具使用
其他
项目总结 ( 分享 ) 项目总结 ( 分享 )
其他
性能考虑• 1. 移动设备是 perf-senstive ( 电池、内存、宽带、延迟等 )
• 2. 缓存。资源的本地存储 (Localstorage)
• 3. 图片优化。惰性加载 , 无损压缩 , spirites,dataURI, K-weight等
• 4. 用 css3 视觉效果代替图片；用 css3 动态效果代替 JS
• 5. 语义化 HTML5 模板和 OOCSS
• 6. 异步。数据异步加载 (ajax) ，模块异步加载，内容延迟加载
• 7. JS 优化。非阻塞加载、响应性加载、轻量
• 8. JS执行效率。 100ms/10ms ，利用 setTimeout拆分长执行时间的操作
• 9。线程。 web worker
• 1. 系统的设计和开发
• 2. 通过重用降低成本
• 3. 综合性方案（设计＋技术）
• 4. 通过设计平衡技术的局限性
共同的挑战
路走错了，奔跑是没有用的。
☺Thanks ！
微博 :t.qq.com/imtank
twitter:twitter.qq.com/imtank