ShinyDashboard -使用CSS缩放整个浏览器

Question

我正在尝试在我的ShinyDashboard上实现zoom，因为当网页浏览器在80%缩放时，布局看起来更好。

我在SO上找到了一篇关于Shiny应用程序的文章，然而，它不适用于Shinydashboard。当我实现CSS时，我得到了很多空格。

文章转到SO：Zoom out shiny app at default in browser

简单代码示例：

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
  tags$style("
              body {
             -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
             zoom: 0.8; /* Other non-webkit browsers */
             zoom: 80%; /* Webkit browsers */
             }
             "),
  "test")

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {}

shinyApp(ui, server)

Answer 1

我不知道这是否解决了您的问题，但请尝试在您的应用程序中添加height

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
  fluidPage(
   tags$head(tags$style(HTML('
                         .content-wrapper,
                        .right-side {
                          background-color: #ffffff;
                          height: 1200px;
                         }

                body{ 
                -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
                zoom: 0.7; /* Other non-webkit browsers */
                 zoom: 70%; /* Webkit browsers */
                }
                          '))),
  "test")
  )

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {}

shinyApp(ui, server)

Answer 2

library(shinyjs)

runjs(
  "document.body.style.zoom = 0.8;
  var elem = document.getElementsByClassName('wrapper');
  elem[0].style.height = '125vh';"
)

此代码段相对拉伸shinydashboard内容，使其在缩小时填满屏幕。然而，我不建议这样做，因为我遇到了交互式地图机制的问题，这是不同浏览器上的一组不同的问题。具体地说，我使用的是googleway的谷歌地图，它会停止渲染地图瓦片，从你点击的地方进行缩放，当你拖动地图时，地图标记会随机移动。

这是一个孤立的bug实例，但我相信您也可能会遇到其他实例，因此我建议您不要这么做。

此外，您可能不得不摆弄正确的vh值，并拉伸仪表板中的任何对象以使其看起来正确。