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演示文稿。我一直在谷歌搜索但仍未找到，或者可能错过了一个。非常感谢你。

Answer 1

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

创建完全响应式幻灯片：

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

setInterval(resizeSlide, 1000);

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

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

1 个答案: