兼容目标

  • 主流移动设备：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. java之迭代器

    迭代这个名词对于熟悉Java的人来说绝对不陌生.我们常常使用JDK提供的迭代接口进行java collection的遍历: Iterator it = list.iterator();while(it ...

  2. HDU3853

    题意:给R*C的迷宫,起点为1,1 终点为R,C 且给定方格所走方向的概率,分别为原地,下边,右边,求到终点的期望. 思路:既然是求到终点的期望,那么DP代表期望,所以DP[i][j]=原地的概率*D ...

  3. AmazeUI 模态框封装

    /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="am-modal am-modal-alert" tabin ...

  4. MVC跳转

    //RedirectToAction(view?参数,控制器); return RedirectToAction("MyjoinEvent?id=" + eventid + &qu ...

  5. Oracle11G安装

    1.安装Oracle 记住要设置好密码 不要忘了 解锁scott(注意一定要解锁)账户, 去掉前面的绿色小勾,输入密码.同样可以输入平常用的短小的密码,不必非得按oracle建议的8位以上大小写加数字 ...

  6. WebSocket协议

    websocket 简介 (2013-04-09 15:39:28) 转载▼   分类: websocket 一 WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例 ...

  7. Swift - 02 - 常量和变量

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  8. ASP.NET菜鸟之路之登录系统

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. 网站介绍 根据书上的例子做了一个比较粗糙的登录例 ...

  9. hdu1690 Bus System（最短路 Dijkstra）

    Problem Description Because of the huge population of China, public transportation is very important ...

  10. oracle删除互相关联的记录

    今天遇到一个问题,在数据库中删除一条记录,但是在删除的时候报错了,报出该记录已经被其他子记录引用,想了好久不知道怎么做,后来发现报错提示信息中会提示删除该记录时影响了那个约束条件,于是思路出来了: 1 ...