R Markdown（Flexdashboard）报告移动端适配问题解决方案咨询

首先明确你原有CSS在移动端失效的原因：flexdashboard默认在生成的HTML头部插入了自适应viewport元标签，会强制移动端按设备宽度渲染，你设置的固定宽度规则会被默认的缩放逻辑覆盖，因此不生效。

方案二：完全保留桌面布局，移动端可缩放查看（实现成本最低） #

该方案可以实现你要的类似移动端打开PDF的效果，布局完全和桌面端一致，不会触发任何重排，用户可手动缩放查看细节。

操作步骤 #

1. 修改你的Rmd文件头部yaml配置，取消默认viewport设置：

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
    viewport: ~ # 新增这行，覆盖默认viewport规则
---

2. 替换你的styles.css内容为以下代码：

html, body {
    min-width: 1100px;
    max-width: 1100px;
    margin: 0 auto;
    color: #000000;
    background-color: #FFFFFF;
    padding-top: 0px;
    padding-left: 0px;
    border-right: 1px solid #e4e4e4;
}
/* 强制shiny的fillRow/fillCol不缩排 */
.shiny-fill-row, .shiny-fill-col {
    flex-wrap: nowrap !important;
    min-width: inherit !important;
}
/* 强制dashboard列容器不折叠 */
.flexdashboard-column, .chart-wrapper {
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

无需修改你原有任何布局代码，重新knit导出HTML即可生效。

方案一：移动端自动重排为垂直布局 #

该方案会在屏幕宽度小于1100px时自动把所有模块改为垂直排布，桌面端显示效果完全不变，支持自定义移动端的布局规则。

操作步骤 #

1. 无需修改Rmd的yaml头默认配置，直接替换styles.css内容为以下代码：

/* 桌面端样式，保留你原有配置 */
@media screen and (min-width: 1100px) {
    body {
        min-width: 1100px;
        max-width: 1100px;
        margin: 0 auto;
        color: #000000;
        background-color: #FFFFFF;
        padding-top: 0px;
        padding-left: 0px;
        border-right: 1px solid #e4e4e4;
    }
}
/* 移动端样式，屏幕宽度小于1100px时自动生效 */
@media screen and (max-width: 1099px) {
    /* 所有行改为垂直排布，取消固定高度限制 */
    .flexdashboard-row {
        flex-direction: column !important;
        height: auto !important;
    }
    /* 所有列占满屏幕宽度 */
    .flexdashboard-column, .chart-wrapper {
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        min-height: 300px !important;
    }
    /* 重写shiny的fillRow为垂直排布 */
    .shiny-fill-row {
        flex-direction: column !important;
        height: auto !important;
    }
    .shiny-fill-row > * {
        width: 100% !important;
        height: 300px !important;
        margin: 10px 0 !important;
    }
    /* valueBox适配全屏宽度 */
    .value-box {
        width: 100% !important;
        margin: 5px 0 !important;
    }
}

如果你需要自定义移动端的布局规则，直接在上述@media screen and (max-width: 1099px)代码块内添加对应的CSS规则即可，所有规则仅对小屏生效，不会影响桌面端显示效果。

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