如何在移动端保留reveal.js的桌面端浏览器行为？

1. 修改Reveal.js初始化配置 #

在你的Reveal初始化代码中，添加/修改以下配置项，强制禁用移动端滚动布局并保留导航箭头：

Reveal.initialize({
  // 保留你原有其他配置（比如主题、过渡效果等）
  mobile: {
    useFullPageScroll: false, // 关闭移动端滚动布局，强制使用桌面幻灯片切换模式
    autoSlide: false // 可选，关闭移动端自动播放（按需设置）
  },
  navigation: {
    arrows: true, // 强制显示上下/左右导航箭头
    hideAddressBar: false // 可选，禁止隐藏地址栏，避免布局偏移
  },
  minScale: 0.2, // 设置允许的最小缩放比例，适配移动端小屏幕
  maxScale: 1.0 // 可选，限制最大缩放比例
});

2. 调整视口Meta标签 #

修改HTML头部的视口标签，允许移动端进行超小比例缩放，确保完整显示桌面布局：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.2, maximum-scale=1.0, user-scalable=no">

• minimum-scale=0.2：允许页面缩放到原尺寸的20%，满足你"超小缩放"的需求
• user-scalable=no：可选，禁止用户手动缩放（若需允许用户缩放，改为user-scalable=yes）

3. 强制显示导航箭头（可选） #

如果导航箭头仍未显示，添加自定义CSS强制显示控件：

.reveal .controls {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

这些设置会让移动端设备完全沿用桌面端的幻灯片布局逻辑，即使内容会被缩得很小，也能保持原有的切换行为和导航控件。

内容的提问来源于stack exchange，提问作者Expo Lixo