HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 查看内容

移动Web开发规范摘录

2016-8-24 11:05| 发布者: Hyukoh| 查看: 781| 评论: 0|原作者: Alloyteam|来自: helloweba

摘要:   移动WEB开发已经是web技术的主流,其实相对于PC端,我们并不需要掌握额外的技术,然而PC上的很多东西并不能全部适用在移动手机WEB,移动WEB端我们必须知道的特别点,以下是我摘录的Alloyteam团队的开发经验。 .. ...

  移动WEB开发已经是web技术的主流,其实相对于PC端,我们并不需要掌握额外的技术,然而PC上的很多东西并不能全部适用在移动手机WEB,移动WEB端我们必须知道的特别点,以下是我摘录的Alloyteam团队的开发经验。


   字体设置


      使用无衬线字体


body { 
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 
} 


  iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。


  •   Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
  •   Heiti SC Medium 黑体-简 中黑
  •   Heiti TC Light 黑体-繁 细体
  •   Heiti TC Medium 黑体-繁 中黑


  原生Android下中文字体与英文字体都选择默认的无衬线字体。


  •   4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
  •   4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体


  其他第三方 Android 系统也一致选择默认的无衬线字体。


  基础交互

 

      设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为。


a, img { 
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ 
} 
html, body { 
    -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */ 
    user-select: none; 
} 


  移动性能


      要考虑Android低端机与2G网络场景下性能!

  发布前必要检查项:


  •   所有图片必须有进行过压缩
  •   考虑适度的有损压缩,如转化为80%质量的jpg图片
  •   考虑把大图切成多张小图,常见在banner图过大的场景
  •   加载性能优化, 达到打开足够快。
  •   数据离线化,考虑将数据缓存在 localStorage
  •   初始请求资源数 < 4
  •   图片使用CSS Sprites 或 DataURI
  •   外链 CSS 中避免 @import 引入
  •   考虑内嵌小型的静态资源内容
  •   初始请求资源gzip后总体积 < 50kb
  •   静态资源(HTML/CSS/JS/Image)是否优化压缩?
  •   避免打包大型类库
  •   确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间)
  •   尽量使用CSS3代替图片
  •   初始首屏之外的静态资源(JS/CSS)延迟加载
  •   初始首屏之外的图片资源按需加载(判断可视区域)
  •   单页面应用(SPA)考虑延迟加载非首屏业务模块
  •   开启Keep-Alive链路复用
  •   运行性能优化, 达到操作足够流畅
  •   避免 iOS 300+ms 点击延时问题
  •   缓存 DOM 选择与计算
  •   避免触发页面重绘的操作
  •   Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行
  •   尽可能使用事件代理,避免批量绑定事件
  •   使用CSS3动画代替JS动画
  •   避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
  •   HTML结构层级保持足够简单
  •   尽能少的使用CSS高级选择器与通配选择器
  •   Keep it simple

原文作者:Alloyteam


本站资源均由 HTML5中国 编辑从其他网站精选HTML5相关资源转载,以供网友参阅,投稿: news@html5cn.org

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-27 10:10

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部