兼容目标

  • 主流移动设备: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页开发规范/通用规范的更多相关文章

  1. 移动端H5多页开发拍门砖经验

    两年前刚接触移动端开发,刚开始比较疑惑,每次遇到问题都是到社区里提问或者吸取前辈的经验分享,感谢热衷于分享的开发者为前端社区带来欣欣向上的生命力.本文结合先前写的文章和开发经验分享给大家,希望也能帮助 ...

  2. ***网Web前端开发规范(初稿)

    这几天一直在梳理关于前端方面的开发规范,现在暂时梳理了HTML的开发规范,暂且放置于此! 规范目的: 使开发流程更加规范化 文件命名规范:(需审批) 1.项目命名 全部采用小写方式, 以下划线分隔. ...

  3. Web 前端开发规范手册

    一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...

  4. h5直播开发之旅总结

    前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...

  5. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  6. WEB前端开发规范

    WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...

  7. thinkphp开发规范

    1.编写目的     为了更好的提高技术部的工作效率,保证开发的有效性和合理性,并可最大程度的提高程序代码的可读性和可重复利用性,指定此规范.开发团队根据自己的实际情况,可以对本规范进行补充或裁减. ...

  8. PHP开发规范

    十.开发规范下面我们讲解 Yii 编程中推荐的开发规范.为简单起见,我们假设 WebRoot 是 Yii 应用安装的目录.1.URL默认情况下,Yii 识别如下格式的 URL: http://host ...

  9. ASP.NET开发规范:OWIN

    ASP.NET开发规范:OWIN 今天投简历 准备面试了... 本节目录: OWIN简介 OWIN规范 Katana Hello World(3种Host) 自定义Middleware OWIN简介 ...

随机推荐

  1. 如何学习H264协议

    如何学习h.264协议 首先,我假定你已经具有如下基础: 1 了解基本的视频知识,知道什么是YCbCr/YUV: 2 知道基本的视频压缩原理: 如果这两条还不具备,那么,停一下,补一下课.这方面的相关 ...

  2. jquery.placeholder.js的使用

    最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...

  3. lucene查询排序结果原理总结

    参考文章 Lucene3.0结果排序原理+操作+示例 Lucene的排序算法 一句话总结lucene排序算法是什么样的 关键几个概念 参考文档: http://lucene.apache.org/co ...

  4. 编译安装php时提示Cannot find MySQL header files的解决方法

    php的配置文件中有一行--with-mysql=/usr/local/mysql ,安装的时候提示:configure: error: Cannot find MySQL header files ...

  5. TalkingData游戏版本在Cocos2d-x 3.0使用

    Cocos2dx在3.0的版本中改动确实不少啊,所以导致原来可以在Cocos2.x版本上的demo都不能直接用,所以不得不重要写一个新的demo 但是TalkingData的库一直都是可以用的,只是之 ...

  6. .NET垃圾回收与内存泄漏

    相信大家一定听过,看过甚至遇到过内存泄漏.在 .NET 平台也一定知道有垃圾回收器,它可以让开发人员不必担心内存的释放问题,因为它会自定管理内存.但是在 .NET 平台下进行编程,绝对不会发生内存泄漏 ...

  7. Firefox中Vimperator插件配置

    具体配置什么,同学们可以网上看下善用佳软关于Vimperator的说明,在这里我列出两条我个人觉得最有用的命令 set nextpattern=\s*下一页|下一张|下一篇|下页|后页\s*,^\bn ...

  8. Linux系统中,main函数的执行过程

    http://blog.csdn.net/rrerre/article/details/6728431

  9. Nginx源码研究七:nginx的location指令分析

    在nginx的配置文件nginx.conf中,我们在配置server的时候,会配置一下location指令,这个location指令是提供给用户来配置对于符合指令的http请求,采用该指令内部的处理方 ...

  10. 钟表维修管理系统技术解析(一) MVC架构搭建

    钟表维修管理系统技术解析(一)  MVC架构搭建 1.1新建项目 第一步:打开VS2010界面,点击左上角文件,点击新建,选择项目 1.1(图1) 第二步:点击网站Web类型,选择ASP.net MV ...