移动端web相关技术

https://gaohaoyang.github.io/2015/06/17/web-app/

 

上面这个 slide 资料讲的非常好，算是一个入门的介绍吧。带我们建立基本的移动 web 开发知识体系和常见问题的实践。包含以下几个方面：

• 基本概念

  • Native

    本地应用 使用 Java \ Objective-C \ Swift 开发

  • WebApp

    网页应用 html5 开发

  • Hybrid

    混合应用 ooxx(native, web)

  • 对比

• 视觉
  • 设备的像素
  • 文字单位使用 rem
  • viewport 属性
  • 横屏竖屏
  • Flex 伸缩布局
  • 响应式设计
  • 软键盘
  • 隐藏地址栏
  • 苹果设备添加到主屏图标
• 交互
  • Touch
  • click 延迟
  • Scroll
  • Gestures(hammer –A javascript library for multi-touch gestures)
  • 手指友好设计
  • HTML5 APIS（图像，摇动，声音等）
• 实践
  • 屏蔽点击元素时的阴影
  • 图像（像素、矢量图标、base64 减少请求、lazyload）
  • CSS3（合理使用渐变/圆角/阴影、代替 js 动画、translate3d、解决动画闪烁）
  • localStorage
  • 避免（iframe、fixed + input）
  • SPA 或 Multi page
  • can I use
  • 压缩合并
  • @G/3G 下建立连接时间
• 调试
  • 浏览器自己的调试工具，模拟手机设备

  • weinre