查看详情页也可支持自定义H5页面，用来展示更多内容。

交互规范

  • 分屏切换，支持横向和竖向，滑动指引需清晰
  • 若详情页加载较慢，需设计loading页，给予用户友好的提示
  • 如有视频，需在底部加上“建议在Wi-Fi环境下播放”提示
  • 建议一个页面不超过两种以上交互操作

设计规范

  • 页面尺寸建议：640像素×1100像素
  • 最小按钮宽度：160像素
  • 最小按钮高度：60像素
  • 页面最小字号：不小于24像素
  • 二维码最小尺寸：200像素×200像素 ，边距至少为10像素
  • 背景音乐规范：必须支持音乐可循环及可关闭，并采用渐强的方式出现
  • 音乐播放/关闭按钮，参加下图规范，并放置于页面右上角位置

H5页面内嵌入全屏视频规范

    • 建议：使用流媒体播放，并添加可跳过播放按钮
    • 时长：≤ 45 秒
    • 视频编码：H.264/AVC
    • FPS：推荐 24 fps
    • 码率：≤ 800 kbit/s
    • 音频格式：AAC
    • 音频码率：≤ 96 kbit/sec
    • 音频采样率：推荐 44.1 kHz
    • 文件大小限制：≤ 5MB ( 实际大小与时长及码率对应，如20秒的视频，大小为 20秒×（800码率÷8）÷1024=1.95MB )

自定义H5页面规范的更多相关文章

  1. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  2. IOS+H5页面自定义按钮无效

    在IOS整合H5页面的时候,自定义的按钮失去效果,Android系统可以. 如图,确定和取消按钮在IOS系统无效. 解决办法是在两个按钮上加上一个style属性即可 <span class=&q ...

  3. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  4. 微信内 H5 页面自定义分享

    起源: 最近公司在做一个活动的h5页面,在微信内打开时需要进行微信授权,然后后端会重定向到这个页面并且携带了一些参数(openid等).问题是点击微信的原生分享时,会把携带的这些参数一起分享出去,等于 ...

  5. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  6. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  7. 【干货】微信场景之H5页面制作免费工具大集合

    营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...

  8. 领导让我重新做一个微信H5页面！

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  9. ASP.NET自定义错误页面

    ASP.NET自定义错误页面 ASP.NET 提供三种用于在出现错误时捕获和响应错误的主要方法:Page_Error 事件.Application_Error 事件以及应用程序配置文件 (Web.co ...

随机推荐

  1. 排名最重要的三个优化阶段分析 --------------------->>转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )

    网站排名,不是一两天能够决定的.要想取得好的排名,得分时间分阶段地做排名,网站优化分前期,中期,后期,怎么来区别不同的阶段该用怎样的优化手段.今晚SEO研究中心创始人Moon老师分享:排名最重要的三个 ...

  2. 【转】HttpServlet详解

    [转]HttpServlet详解 Servlet的框架是由两个Java包组成:javax.servlet和javax.servlet.http. 在javax.servlet包中定义了所有的Servl ...

  3. Excel操作 Microsoft.Office.Interop.Excel.dll的使用

    ----转载: http://www.cnblogs.com/lanjun/archive/2012/06/17/2552920.html 先说说题外话,前段时间近一个月,我一直在做单据导入功能,其中 ...

  4. （转）PHP函数spl_autoload_register()用法和__autoload()介绍

      转--http://www.jb51.net/article/29624.htm 又是框架冲突导致__autoload()失效,用spl_autoload_register()重构一下,问题解决 ...

  5. Jquery 操作 select

    1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@value='paraValue']" ...

  6. 第一个shell编程，输出hello world！

    在计算机科学中,Shell俗称壳(用来区别于核),是指“提供使用者使用界面”的软件(命令解析器).它类似于DOS下的command和后来的cmd.exe.它接收用户命令,然后调用相应的应用程序.--- ...

  7. SVN 不能提交, 看不到日志, 出现乱码. 解决方案.

    需要工具 sprite3: 点这里下载. 解决问题 如本文标题所写. 我遇到过几次一样的问题, 每次都很蛋疼的把目录重新检出, 浪费时间, 又伤了脾气. 下面是我在百度经验找到的一片帖子, 效果杠杠的 ...

  8. Ajax的原理和运行机制

    关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行.当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一.在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验. ...

  9. CentOS6.5安装LAMP环境的前期准备

    首先需要按照前一篇<CentOS 6.5下安装MySql 5.7>的安装步骤配置好防火墙.关闭 SELINUX 1.编译安装libxml2注:libxml2是一个xml的c语言版的解析器, ...

  10. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...