重构之道触屏篇

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

触屏项目分类

项目总结 ( 分享 )

工具使用

其他

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" />

•WEBAPP 加上 LINK <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);});

当不满一屏时无效

隐藏地址栏

text-overflow: ellipsis

触屏项目分类

工具使用

其他

项目总结 ( 分享 )

• http://house.3g.qq.com/html5/down.jsp

15.3k 20.6k 6.19k

充分利用伪元素充分利用伪元素 ::before,::after::before,::after

激活输入框时，将屏幕滚动到合适的地方

先拉键盘获取焦点滚动屏幕

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

迭代 1 迭代 2 迭代 2

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

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

Touchstart 和 touchend 模拟 hover 状态

触屏项目分类

工具使用

其他

项目总结 ( 分享 ) 项目总结 ( 分享 )

工具使用

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

重构之道 触屏篇

Design

重构之道触屏篇