如何让Shiny App适配各类屏幕尺寸，实现图表自动缩放？

下面提供几种实用方案，让你的图表和界面自动适配不同尺寸的屏幕：

方法1：使用相对单位设置图表尺寸 #

直接给plotOutput设置百分比宽度，搭配视口高度单位（vh）定义高度，让图表占满容器可用空间：

修改UI中的plotOutput部分：

mainPanel(
  plotOutput("distPlot", width = "100%", height = "70vh") # 70vh表示占当前窗口高度的70%
)

同时在renderPlot中添加res参数，优化高分辨率屏幕的显示清晰度：

output$distPlot <- renderPlot({
  # 原绘图逻辑保持不变
}, res = 96) # 常规屏幕用96，高分辨率屏幕可设为192

方法2：动态监听窗口尺寸调整图表 #

利用shinyjs监听窗口大小变化，实时计算图表高度。修改后的完整代码如下：

library(shiny)
library(shinyjs)

mytest <- c("first","second")

ui <- fluidPage(
  useShinyjs(),
  # 添加监听窗口尺寸的JS脚本
  tags$script('
    $(window).resize(function() {
      Shiny.setInputValue("window_height", $(window).height());
      Shiny.setInputValue("window_width", $(window).width());
    });
    // 页面加载时触发一次初始化
    $(window).resize();
  '),
  
  titlePanel("disable"),
  
  sidebarLayout(
    sidebarPanel(
      selectInput(inputId = "test",
                  label = "Test",
                  choices = mytest,
                  selected = "first"),
      disabled(checkboxInput("checkbox","check this box", FALSE))
    ),
    
    mainPanel(
      plotOutput("distPlot", width = "100%")
    ))
)

server <- function(input, output) {
  
  output$distPlot <- renderPlot({
    switch(input$test,
           "first" = { 
             plot(rnorm(100))
             disable("checkbox")
           },
           {
             enable("checkbox")
             if(input[["checkbox"]] == FALSE){
               plot(rnorm(1000), col="blue")
             } else{
               plot(rnorm(10000), col="red")   
             }
           }
    )
  }, height = function() {
    # 动态计算高度：窗口高度减去标题、侧边栏的固定高度，留200px余量
    input$window_height - 200
  })
}

shinyApp(ui = ui, server = server)

方法3：优化整体布局结构 #

用fluidRow和column替代默认的sidebarLayout，让侧边栏和主面板在小屏幕上自动堆叠：

修改UI部分：

ui <- fluidPage(
  useShinyjs(),
  
  titlePanel("disable"),
  
  fluidRow(
    # 大屏幕占3列宽度，小屏幕自动切换为全宽（12列）
    column(width = 3, 
           selectInput(inputId = "test",
                       label = "Test",
                       choices = mytest,
                       selected = "first"),
           disabled(checkboxInput("checkbox","check this box", FALSE))
    ),
    # 主内容区大屏幕占9列，小屏幕全宽
    column(width = 9,
           plotOutput("distPlot", width = "100%", height = "70vh")
    )
  )
)

以上方案可单独使用，也可组合搭配，让你的App在不同尺寸屏幕上都能正常显示。

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