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

问题描述

我正在尝试在 ShinyDashboard 上实现 zoom ，因为当Web浏览器的缩放比例为80％时，布局看起来会更好.

I am trying to implement zoom on my ShinyDashboard as the layout looks better when it is at 80% zoom for the web browser.

我在 Shiny 应用程序上找到了一篇关于SO的文章，但是，它不适用于 Shinydashboard .实施CSS时，会出现很多空白.

I found an article on SO for a Shiny app, however, it doesn't work for Shinydashboard. When I implement the CSS, I get a lot of dead white space.

文章全文:在浏览器中默认情况下缩小闪亮的应用程序

简单代码示例:

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)

推荐答案

library(shinyjs)

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

此代码段相对扩展了 shinydashboard 内容，以在缩小屏幕时填充屏幕.但是，我不建议这样做，因为我遇到了交互式地图机制的问题，这是在不同浏览器上出现的一系列不同问题.具体来说，我使用的是 googleway 的google地图，它会停止渲染地图图块，从单击位置的远处进行缩放，并且在拖动地图时会随机移动地图标记.

This snippet stretches shinydashboard content relatively to fill the screen while zooming it out. However, I don't recommend this because I ran into issues with interactive map mechanics, a different set of problems on different browsers. Specifically, I'm using googleway's google maps and it stops rendering map tiles, zooms from a distance away where you clicked, and map markers move randomly as you drag the map.

这是一个孤立的错误实例，但是我敢肯定您还会遇到其他错误，因此，我对此提出了建议.

This is an isolated instance of bugs, but I'm sure there are other you could run into as well, hence my recommendation against this.

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

In addition, you may have to fiddle with the right vh value and stretch whatever objects inside your dashboard to make it look right.

这篇关于ShinyDashboard-使用CSS缩放整个浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！