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

Web App开发

周祺
January 17, 2013

Web App开发

Web App开发中的各种问题

周祺

January 17, 2013
Tweet

More Decks by 周祺

Other Decks in Programming

Transcript

  1. Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/ HVGA @media screen and (max-width: 320px)

    { ... } WVGA @media screen and (max-width: 321px) and (max-width: 480px) { ... } iPad @media screen and (max-width: 481px) and (max-width: 768px) { ... } Larger @media screen and (min-width: 769px) { ... } 13年3月5⽇日星期⼆二
  2. 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即不可放⼤大 13年3月5⽇日星期⼆二
  3. <meta content="width=320" name="viewport" /> View Port <meta content="initial-scale=1.5" name="viewport" />

    width=320 当应⽤用为320px宽屏幕设计时,可以制定浏 览器的layout viewport也为320px,使应⽤用在 各种设备上完美显⽰示,但android不⽀支持 initial-scale=1.5 ⼀一个解决的办法是制定缩放⽐比率,⽐比如 480px的设备上缩放⽐比率为1.5 13年3月5⽇日星期⼆二
  4. ScrollView Chrome 打开chrome://flags/,启⽤用“FPS 计数器” Android adb fps 50+on desktop 30+on

    mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效,通过查看fps返回修改代码,尝试各种⽅方案来提⾼高流畅度 13年3月5⽇日星期⼆二
  5. 数据缓存 有缓存? 请求 读取缓存 请求 否 是 过期? 否 重新请求

    客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存 13年3月5⽇日星期⼆二