H5页开发规范/通用规范
兼容目标
-
主流移动设备: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 进行数据提交;
- 详情页所有资源上线前将部署到腾讯服务器;
- 不允许在页面中添加非腾讯域名的资源;
- 若页面中包括视频,提供视频文件,由运营经理上传至腾讯视频服务器后再提供视频地址;
作者:青茶
免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用