码迷,mamicode.com
首页 > 其他好文 > 详细

H5页开发规范/通用规范

时间:2016-05-04 22:32:18      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

兼容目标

  • 主流移动设备:iPhone 4+ 、三星、魅族、华为、红米、小米1S 以上及主流 Android 千元机型;请特别关注iPhone4/4s、魅族MX4、华为P6等机型
  • 操作系统:iOS 7.0+ 与 Android 4.0+;

加载速度、请求数与资源压缩

  • 以 3G 网络环境 100kb/s 的网络速度计算,详情页首次加载过程中,可以在 2s 内看到 Loading 页面;
  • 原则上页面中不超过 1 个的样式文件请求、2 个的脚本文件网络请求;
  • 图片资源应当进行压缩,JPG 图片使用 80% 以下质量,PNG 图片使用 TinyPNG 进行压缩;
  • 详情页平均单页资源不超过 300 KB,总资源包大小不超过页数乘以300KB(不包括视频资源);
  • 应当对小图片进行 CSS 雪碧图 合并,因低版本系统及低端设备渲染问题,单张图片尺寸不超过 2000x2000 像素,超过时需切分成多张雪碧图;

资源文件格式标准

文件类似格式大小其它备注
背景音乐 mp3 小于 80 KB 开头和结尾音轨建议做使用淡入淡出处理
分享缩略图 jpg 小于 6 KB 尺寸为 120x120 像素
视频文件 mov/mp4/avi 暂无要求 分辨率>=960×540,视频码率>=1500kbps,画面比例 4:3或16:9

资源部署

  • 详情页应只包含静态文件资源,涉及数据交互使用 AJAX 进行数据提交;
  • 详情页所有资源上线前将部署到腾讯服务器;
  • 不允许在页面中添加非腾讯域名的资源;
  • 若页面中包括视频,提供视频文件,由运营经理上传至腾讯视频服务器后再提供视频地址;

H5页开发规范/通用规范

标签:

原文地址:http://www.cnblogs.com/lazb/p/5459906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!