如何将 Reveal.js 方向更改为纵向或垂直？

Question

我使用由 hakimel 创建的 reveal.js，我想问的一件事是，是否可以将显示方向更改为垂直以便针对移动设备进行优化？

当我使用 cordova 时，它运行良好，但是当内容超过其高度时，我看不到下一个内容。我试图破解 css，所以它是可滚动的，这是我的 css:

.scrollable {
                margin-top: -200px;
                bottom: 0px;
                overflow-y: auto  !important;
                overflow-x: hidden !important;
            }

并将其应用于我的部分元素 <section class="scrollable">，但它仍处于横向模式，因此屏幕的顶部和底部留有空白。太浪费了。

如果没有办法，请给我一些html针对移动设备优化但也支持桌面的演示文稿。我一直在 google 上搜索，但仍然没有找到，或者可能遗漏了一个。非常感谢。

Answer 1

您可以在配置显示时更改幻灯片分辨率以匹配设备尺寸，但您必须确保幻灯片能够适应尺寸变化。

要创建完全响应的幻灯片：

var resizeSlide = function() {
   Reveal.configure({
     width: window.innerWidth,
     height: window.innerHeight
   });
}

setInterval(resizeSlide, 1000);

然后您需要使您的幻灯片内容响应幻灯片格式的变化，但这将使他们利用整个页面进行演示。我使用的是 setInterval 而不是 onResize，因为 onResize work/isn 在移动设备和某些 browser/os 组合

上的方向变化不够可靠

如何将 Reveal.js 方向更改为纵向或垂直？

How to change Reveal.js orientation to portrait or vertical?

cordova

reveal.js