Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web App

周祺
April 04, 2014

Web App

周祺

April 04, 2014
Tweet

More Decks by 周祺

Other Decks in Programming

Transcript

  1. PC ✦ click (double click) ✦ keydown (up / press)

    ✦ mousewheel ✦ hover ✦ drag
  2. 还有什么? • 分辨率 • 弹性设计 • 物理尺⼨寸 • 点击区域、展现⽅方式 •

    orientation(⽅方向) • 界⾯面⽀支持、响应横、竖屏 • devicePixelRatio(设备像素⽐比) • ⾼高清化
  3. • 设备 • Device API依赖设备传感器 • 输⼊入设备区别:如是否有硬返回键 • 系统、系统壳 •

    不同系统提供不同的特有接⼝口:如各种协议、系统通知 • 开源的android带来⼤大量的OS:如云OS提供特殊的CloudAPI • 浏览器、浏览器壳 • 不同的浏览器⽀支持不同的特性 • 相⽐比PC端有更多的定制,更多的“⾃自主内核”,带来更多兼容性问题,如 android上的UC、QQ不⽀支持SVG • 客户端 • WebView\UIWebView的低成本定制带来的问题:如⼀一些淘宝客客户端未开 启localStorage⽀支持; Mobile - 运⾏行环境
  4. View Port <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> width=device-width

    浏览器预设的宽度(iphone4为 320),不是设备的真实宽度 user-scalable = 0 禁⽌止⽤用户缩放 initial-scale=1.0 初始缩放,1.0即不缩放 maximum-scale=1.0 最⼤大缩放⽐比率,1.0即不可放⼤大
  5. Chrome Rendering - Show FPS meter Android adb fps 50+on

    desktop 30+on mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效,通过查看fps返回修改代码,尝试各种⽅方案来提⾼高流畅度 ScrollView
  6. 数据缓存 有缓存? 请求 读取缓存 请求 否 是 过期? 否 重新请求

    客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存
  7. User Agent 淘宝主客等APP可以通过UA来识别、读取版本号 Mozilla/5.0 (Linux; U; Android 4.3; zh-cn; GT-I9500

    Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30;T- UA=android_3.5.0_1080x1920_100000