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

【问题标题】：How to change Reveal.js orientation to portrait or vertical?如何将 Reveal.js 方向更改为纵向或垂直？
【发布时间】：2015-10-04 15:04:20
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： cordova reveal.js

【解决方案1】：

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

创建完全响应的幻灯片：

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

setInterval(resizeSlide, 1000);

然后，您需要使您的幻灯片内容能够响应幻灯片格式的变化，但这会使他们利用整个页面进行演示。我使用的是 setInterval 而不是 onResize，因为 onResize 在移动设备和某些浏览器/操作系统组合上的方向变化中不起作用/不够可靠

【讨论】：