Epub360教程：如何制作横屏H5

来源：用户分享时间：2025/6/1 14:12:29 本文由

loading 分享下载这篇文档手机版

说明：文章内容仅供预览，部分内容可能不全，需要完整文档或者需要复制内容，请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ：xxxxxx 处理（尽可能给您提供完整文档），感谢您的支持与谅解。

Epub360教程：如何制作横屏H5

[原创]2016-08-04 小派意派科技

横屏H5该怎么做？应该会有很多派友想知道吧，今天我们就给同学们说道一下，希望能够帮到你哦～

在案例 “来了就是深圳人”中，“只做设计”李志用了一个很有创意的方式（如下图所示），这里分享给大家。

立即感受->>来了就是深圳人原理介绍

Epub360制作的H5，采用按比例缩放适合＋显示画布外内容的方式，来适配各种的手机屏幕，前者确保画布区域完整显示、后者确保不会露白。

先简单设置一个横屏画布尺寸，来具体演示一下：

再看看在手机中的显示效果：

所以，只要在竖屏模式下，画布的上下两边，给出需要横屏的提示就可以了。

设置方式

1. 横屏画布设置：宽度 740px，高度 340px

2. 提示图片准备

3. 在画布中设置提示图片组件尺寸、位置

4. 看看效果如何

好了，到这一步就算是设置完成了。

实际项目中，可以把整个横屏提示内容放到Layer里，在每一页里通过Layer容器引用，这样只需要设置一次，如果H5有很多页的话，这样会简单很多。