狠狠撸

狠狠撸Share a Scribd company logo

高端版罢尘补濒濒

?Download as PPT, PDF?
?
tbmallf2e
tbmallf2e
1 of 26
Download to read offline
移动高端版 TMALL 夏初
PART 02 开发过程 设计稿 HTML CSS Javascriprt 搭建模块 遇到的问题 性能分析 PART 01 Mobile Web App 高端版 与桌面 WEB 应用的区别 基础知识
PART 01 —— 高端版 主要平台 —— iOS & Android 代表浏览器 —— Mobile Safari / Android Webkit
PART 01 —— 高端版
PART 01 —— 与桌面 WEB 应用的区别 有限的屏幕大小 屏幕旋转自适应 基于 Webkit 内核浏览器 —— 支持 HTML5 、 CSS3 足够大的点击范围 触发事件 —— 触摸、手势、重力感应
PART 01 —— 基础知识 1. 私有 meta 属性 <meta?content=&quot; width=device-width,? initialscale=1.0, ?maximum-scale=1.0,? user-scalable=0;&quot;? name=&quot; viewport &quot;?/> <meta?content=&quot;yes&quot;?name=&quot; apple-mobile-web-app-capable &quot;?/> <meta?content=&quot;black&quot;?name=&quot; apple-mobile-web-app-status-bar-style &quot;?/> <meta?content=&quot;telephone=no&quot;?name=&quot; format-detection &quot;?/>
PART 01 —— 基础知识 2. 私有 CSS 属性 -webkit-box-shadow:none; 设置内外阴影和发光效果。 -webkit-tap-highlight-color 设置焦点框效果 -webkit-text-size-adjust:none; 设置后旋转屏幕字体大小不变 -webkit-transform 用于变形（静态） -wedkit-transition 用于动画（动态） -webkit-user-select:none; 禁止用户选择 -webkit-box-flex 与 display:-webkit-box 配合使用，用于设置元素宽度所占比例
PART 01 —— 基础知识 3. CSS3 高级属性 nth-child 与 nth-of –type X:nth-child(Y) ：匹配元素类型为 X ，且为父元素的第 Y 个子元素。重在第几个孩子！ X:nth-of-type(Y) ：匹配元素类型为 X ，且为父元素的第 Y 个类型 ( 指标签类型而非属性类型 ) 为 X 的子元素。重在第几个 X 类型！ 二者区别在于，列表中插入其它类型的标签时， nth-child 值改变，而 nth-of-type 值不变。 Y = an+b a 表示步长， b 表示从第几个元素开始
PART 01 —— 基础知识 4. 检测设备 navigator.userAgent.match(/iPhone|iPod|android|…/i ）
PART 01 —— 基础知识 5. 自动隐藏地址栏 setTimeout(scrollTo, 0, 0, 1); 条件：文档内容高度 > 窗口高度 6. 检测页面旋转 通过 window.orientation 属性获取当前页面方向： ０ 正常的竖直方向 -90 默认方向顺时针 90° 90 默认方向逆时针 90° 180 反向竖直方向，暂时手机还不支持
PART 01 —— 基础知识 7. 事件 单手指操作触摸 touchstart 、 touchmove 、 touchend 和 touchcancel 两根手指的缩放和旋转 gesturestart 、 gestureend 和 gesturechange
PART 02 —— 开发过程 开发过程 设计稿 HTML CSS Javascriprt 搭建模块 遇到的问题 性能分析
PART 02 —— 设计稿
?
拿到设计稿后 了解设计需求，有疑问与 PD 或设计师沟通 确定页面开发先后顺序（有主有次，有难有易） 分析页面，大体把握页面结构（哪些模块可以复用，避免重复开发，提高效率）
PART 02 —— HTML 代码简洁，语法规范 确定点击区域， a 标签块级化 空标签的处理（看情况）
PART 02 —— CSS 小三角 上下左右边距 / 框 不要限制高度 自适应宽度 <style> .floor-brand{ display:?-webkit-box; } .floor-brand a{ display:?block; -webkit-box-flex:?1; } </style> <div class=“floor-brand”> <a><img src=/slideshow/tmall/10462621/“” /></a> <a><img src=/slideshow/tmall/10462621/“” /></a> <a><img src=/slideshow/tmall/10462621/“” /></a> </div> .floor-cap span:after?{ content:?'?00a0'; display:?block; position:?absolute; top:?15px; right:?73px; height:?0; width:?0; border-color:?transparent?transparent?transparent?white; border-style:?solid; border-width:?4px; } li:nth-of-type(3n)?{ border-right:?none; } li:nth-last-of-type(-n+3)?{ border-bottom:?0; }
PART 02 —— JS 类目展开与收起 吊顶 轮播 瀑布流
PART 02 —— 搭建模块 标题是否需要编辑 哪些内容由前端决定，哪些内容由运营填写。 问题 1 ：在 img 中加 alt 或 title ， title 中有 <br /> 则会被截断出错。 问题 2 ：标题为空，则被无线的解析模板解析为自闭合，出错。
PART 02 —— 遇到的问题 1. 自适应高度
PART 02 —— 遇到的问题 2. 回顶部
PART 02 —— 遇到的问题 3. 瀑布流 图片叠加问题 滚动高度问题 iOS 的 $(window).scrollTop() 返回 0 ，应该使用 window.scrollY 获取滚动条的实时数值；
?
PART 02 —— 性能分析 YSlow for Mobile/Bookmarklet http://developer.yahoo.com/yslow/mobile/ Mobitest http://www.blaze.io/mobile/
m.tmall.com iOS4.3
Thank You!

More Related Content

高端版罢尘补濒濒

  • 2. PART 02 开发过程 设计稿 HTML CSS Javascriprt 搭建模块 遇到的问题 性能分析 PART 01 Mobile Web App 高端版 与桌面 WEB 应用的区别 基础知识
  • 3. PART 01 —— 高端版 主要平台 —— iOS & Android 代表浏览器 —— Mobile Safari / Android Webkit
  • 4. PART 01 —— 高端版
  • 5. PART 01 —— 与桌面 WEB 应用的区别 有限的屏幕大小 屏幕旋转自适应 基于 Webkit 内核浏览器 —— 支持 HTML5 、 CSS3 足够大的点击范围 触发事件 —— 触摸、手势、重力感应
  • 6. PART 01 —— 基础知识 1. 私有 meta 属性 <meta?content=&quot; width=device-width,? initialscale=1.0, ?maximum-scale=1.0,? user-scalable=0;&quot;? name=&quot; viewport &quot;?/> <meta?content=&quot;yes&quot;?name=&quot; apple-mobile-web-app-capable &quot;?/> <meta?content=&quot;black&quot;?name=&quot; apple-mobile-web-app-status-bar-style &quot;?/> <meta?content=&quot;telephone=no&quot;?name=&quot; format-detection &quot;?/>
  • 7. PART 01 —— 基础知识 2. 私有 CSS 属性 -webkit-box-shadow:none; 设置内外阴影和发光效果。 -webkit-tap-highlight-color 设置焦点框效果 -webkit-text-size-adjust:none; 设置后旋转屏幕字体大小不变 -webkit-transform 用于变形（静态） -wedkit-transition 用于动画（动态） -webkit-user-select:none; 禁止用户选择 -webkit-box-flex 与 display:-webkit-box 配合使用，用于设置元素宽度所占比例
  • 8. PART 01 —— 基础知识 3. CSS3 高级属性 nth-child 与 nth-of –type X:nth-child(Y) ：匹配元素类型为 X ，且为父元素的第 Y 个子元素。重在第几个孩子！ X:nth-of-type(Y) ：匹配元素类型为 X ，且为父元素的第 Y 个类型 ( 指标签类型而非属性类型 ) 为 X 的子元素。重在第几个 X 类型！ 二者区别在于，列表中插入其它类型的标签时， nth-child 值改变，而 nth-of-type 值不变。 Y = an+b a 表示步长， b 表示从第几个元素开始
  • 9. PART 01 —— 基础知识 4. 检测设备 navigator.userAgent.match(/iPhone|iPod|android|…/i ）
  • 10. PART 01 —— 基础知识 5. 自动隐藏地址栏 setTimeout(scrollTo, 0, 0, 1); 条件：文档内容高度 > 窗口高度 6. 检测页面旋转 通过 window.orientation 属性获取当前页面方向： ０ 正常的竖直方向 -90 默认方向顺时针 90° 90 默认方向逆时针 90° 180 反向竖直方向，暂时手机还不支持
  • 11. PART 01 —— 基础知识 7. 事件 单手指操作触摸 touchstart 、 touchmove 、 touchend 和 touchcancel 两根手指的缩放和旋转 gesturestart 、 gestureend 和 gesturechange
  • 12. PART 02 —— 开发过程 开发过程 设计稿 HTML CSS Javascriprt 搭建模块 遇到的问题 性能分析
  • 13. PART 02 —— 设计稿
  • 14. ?
  • 15. 拿到设计稿后 了解设计需求，有疑问与 PD 或设计师沟通 确定页面开发先后顺序（有主有次，有难有易） 分析页面，大体把握页面结构（哪些模块可以复用，避免重复开发，提高效率）
  • 16. PART 02 —— HTML 代码简洁，语法规范 确定点击区域， a 标签块级化 空标签的处理（看情况）
  • 17. PART 02 —— CSS 小三角 上下左右边距 / 框 不要限制高度 自适应宽度 <style> .floor-brand{ display:?-webkit-box; } .floor-brand a{ display:?block; -webkit-box-flex:?1; } </style> <div class=“floor-brand”> <a><img src=/slideshow/tmall/10462621/“” /></a> <a><img src=/slideshow/tmall/10462621/“” /></a> <a><img src=/slideshow/tmall/10462621/“” /></a> </div> .floor-cap span:after?{ content:?'?00a0'; display:?block; position:?absolute; top:?15px; right:?73px; height:?0; width:?0; border-color:?transparent?transparent?transparent?white; border-style:?solid; border-width:?4px; } li:nth-of-type(3n)?{ border-right:?none; } li:nth-last-of-type(-n+3)?{ border-bottom:?0; }
  • 18. PART 02 —— JS 类目展开与收起 吊顶 轮播 瀑布流
  • 19. PART 02 —— 搭建模块 标题是否需要编辑 哪些内容由前端决定，哪些内容由运营填写。 问题 1 ：在 img 中加 alt 或 title ， title 中有 <br /> 则会被截断出错。 问题 2 ：标题为空，则被无线的解析模板解析为自闭合，出错。
  • 20. PART 02 —— 遇到的问题 1. 自适应高度
  • 21. PART 02 —— 遇到的问题 2. 回顶部
  • 22. PART 02 —— 遇到的问题 3. 瀑布流 图片叠加问题 滚动高度问题 iOS 的 $(window).scrollTop() 返回 0 ，应该使用 window.scrollY 获取滚动条的实时数值；
  • 23. ?
  • 24. PART 02 —— 性能分析 YSlow for Mobile/Bookmarklet http://developer.yahoo.com/yslow/mobile/ Mobitest http://www.blaze.io/mobile/