h5尺寸规范，h5尺寸规范不可忽视的细节？-营销圈

h5尺寸规范，h5尺寸规范不可忽视的细节？

用户投稿 • 2022年5月20日 am11:09 • 网络资讯 • 阅读 395

张小龙在今年的微信公开课上曾表示，将要在微信上推出应用号，而最近关于应用号正在测试的传言不止。拒传言，有了应用号后就不需要再安装 APP，当需要用到它的时，直接在微信上打开就可以用了。猜测应用号的载体将会以 H5 的形式来呈现，而微信H5本身自带传播属性，将大大地降低企业的开发、推广、运营成本。

小编一路跌跌撞撞，误入 H5 此坑也有1年多了，零散地总结了下那些年遇到的坑，希望对将要入坑或正在坑中饱受煎熬的你有点帮助。

1、勿轻易用右滑的交互方式

在H5中尽量不要设计使用向右滑动的交互方式。因为不论是在 Android 上，还是 iPhone 中，向右滑动容易误触发返回上一级页面。

2、操作按钮远离页面底部

现在主流的H5设计尺寸是参照 iPhone5s 的屏幕来设计的（640px * 1136px），所以一般H5的尺寸规范为640 px * 1008 px（导航栏和状态栏共占据128px）。一般按钮放在距离底部128px 以上，这样不仅能在不同机型上做良好地适配，而且对于单手操作的人来说较为舒适。

3、多个音乐同时播放

由于系统的限制，Android 在同一时间，只允许播放一段背景音乐。在 IOS 下并没有限制，例如 iPhone 的机型在播放背景音乐的同时可以做到播放各种交互音效。所以一般在 Android 上 H5 只播放背景音乐。如有特殊场景的话，可以先暂停背景音乐，再播交互音效，音效播放完毕后再播背景音乐。

4、特殊机型的适配

H5在不同的机型适配，虽然每个开发者都有一套自己的完整方案，但一定要注意小屏机（虽说现在大屏机已是主流，尤其是iPhone4s）和带有虚拟按键的机型适配（如魅蓝note）。

5、勿轻易用横屏的交互方式

不要轻易使用横屏。在微信 for Android 中，H5以横屏的方式展现的前提是：其一，开启系统的屏幕旋转；其二，开启微信的横屏模式。操作成本较高，而且顶部的导航栏和状态栏还占据了一定的宽度（屏幕本身就比较窄）。如果场景需要，一定要引导用户如何开启横屏模式。

6、图片请压缩

图片是网页的重要资源，除了常见的PS来压缩图片外，推荐大家去 Tinypng，在这里可以压缩网页中常见图片，如 .png 和 .jpg ，而且可以拖拽一组图，压缩完后还可以一键下载，效果也是杠杠滴~（之前在实用网站中也有提到过）。

7、背景音乐请压缩

背景音乐当然是越清晰越好，为了让 H5 本身更流畅，通常我们会对背景音乐做压缩，一般情况下我们会降低音频的比特率（控制在32kbps，这个在格式工厂中属于低质量音频），时间尽量控制在1min之内，保持最终的文件大小在600kb以内。

8、CSS Sprites 图像拼合

浏览网页的时候，细心的童鞋可能会发现，有些网页中多张图片素材按照一定的规则合成在一张大图中。为什么这样处理呢？因为把多张图片放在一张大图可以大大减少资源对服务器的请求次数，另外合成后的图片文件大小比多个单张图片要小的多。（技术实现原理实际上是用 background-position 来实现对应图片的定位）

9、Animate（动画）

各种炫酷的H5动画其实大部分都可以用 CSS 动画来实现。动画的原理无非是对象的位置、大小、旋转、透明度在单位时间的变化形成一系列的动画。而这些对象属性在H5中都有对应的属性来控制。通过代码来实现的，所以相比较序列图形式，性能更优、访问速度更快。

10、使用 SVG 格式图片

就像矢量图形一样，SVG 也是一种图片类型，不过它是基于一系列有序地代码构成的，所以以 SVG 格式存储的图片资源文件比较小，相比较 JPG 而言，几乎是近百倍的差距。所以用 AI 等矢量工具制作的页面，优先考虑将图片存储为 SVG 格式。

好的，今天就码到这里了。欢迎在底部留言交流分享，你的每一条留言，我都有认真去看，码字不易，这是对小编的最大支持。啊哈哈~

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家对网络推广引流和网络创业项目感兴趣，可以添加微信：Sum8338 备注：营销圈引流学习，我拉你进直播课程学习群，每周135晚上都是有实战的推广引流技术和网络创业项目课程分享，当然是免费学！

h5尺寸规范，h5尺寸规范不可忽视的细节？

相关推荐