在768px–1024px平板断点下，通过min-width媒体查询配合flex布局使侧边栏默认常驻显示，禁用JS控制、优先CSS实现，兼顾可访问性与平滑过渡。

在 H5 页面中，让平板端（如 768px–1024px 宽度）的侧边导航自动展开，关键不是“强制展开”，而是通过媒体查询配合合理的 DOM 结构与 CSS 控制，使导航在该断点下默认可见、不折叠。这需要兼顾用户体验（避免遮挡内容）和交互逻辑（不依赖 JavaScript 也能生效）。

使用 min-width + flex 布局实现“自然展开”

平板宽度通常介于桌面和手机之间，建议以 768px 为下限触发侧边栏常驻显示：

• 确保 HTML 中侧边栏（如
  ）与主内容（
  ）同级，且未被 JS 默认隐藏
• 基础 CSS 设置侧边栏默认为隐藏（针对手机），例如：.sidebar { display: none; }
• 在媒体查询中重置显示方式，并用 flex 布局并排呈现：

@media screen and (min-width: 768px) {
  .sidebar {
    display: block;
    width: 260px; /* 固定或 max-content */
  }
  .container {
    display: flex;
  }
  .container > .sidebar {
    flex-shrink: 0;
  }
  .container > main {
    flex: 1;
  }
}

避免 JS 干预，优先用 CSS 控制状态

若当前导航依赖 JavaScript 控制显隐（如点击汉堡菜单切换 active 类），需调整逻辑：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 在平板及以上断点，移除对 .sidebar.active 的依赖，直接让 .sidebar 在该范围始终生效
• 可借助 @media 覆盖 JS 添加的内联样式或类名，例如：@media (min-width: 768px) { .sidebar { display: block !important; } }（仅在必要时使用 !important）
• 若使用 CSS 自定义属性控制开关，可在媒体查询中重设变量值，如：:root { --sidebar-show: 0; } @media (min-width: 768px) { :root { --sidebar-show: 1; } }，再配合 display: var(--sidebar-show, 0) == 1 ? 'block' : 'none'（注意：CSS 不支持三元运算，需搭配 display: block 和 display: none 分别声明）

适配不同平板方向与分辨率

部分 iPad 竖屏为 768px，横屏达 1024px；安卓平板差异更大。推荐组合写法：

• 用 min-width: 768px 覆盖主流竖屏平板
• 补充 and (orientation: landscape) 处理横屏场景，例如：@media screen and (min-width: 768px) and (orientation: landscape)
• 若需更精准控制，可叠加 max-width: 1200px 防止在小桌面误触发，形成：@media screen and (min-width: 768px) and (max-width: 1200px)

辅助可访问性与过渡体验

自动展开不等于“突兀出现”，应保障平滑与可用性：

• 给侧边栏添加 transition: transform 0.3s ease 或 opacity，并在媒体查询中启用（注意：display 无法过渡，改用 visibility + opacity 或 transform: translateX()）
• 确保键盘用户能聚焦到导航链接，平板模式下不要禁用 tabindex 或 focus 样式
• 若页面有“关闭侧边栏”按钮，应在平板媒体查询中隐藏该按钮，避免干扰