Question

我已经使用R Shiny框架成功构建了一个webapp。我在Googlemap中展示了一些观点。现在我如何自动调整html页面的高度和宽度，使其最适合不同的显示器尺寸？我也尝试将内容放在html代码中。这个＆＃34; tags$iframe(width="1330", height="580",＆＃34;部分是在带有滚动条的Internet Explorer中加载页面，但在相同的笔记本电脑显示器中没有scrllbar的适合视图中，相同的设置在Chrome中显得非常好。我们怎样才能确保它在所有浏览器和设备（如标签，智能手机）中都有用？

以下是我的代码：

在UI.r中：

 shinyUI(fluidPage(
     titlePanel("My webpage heading"),
     mainPanel(
         htmlOutput("mypage")
     )
 ))

在SERVER.r中：

shinyServer(function(input, output) {
    addResourcePath("library", "D:/R Projects")
    output$mypage < -renderUI({
        tags$iframe(width = "1330", height = "580",
            src = "library/mypage.html")

    })
})

mypage.html源代码的顶部如下：

<html>
  <head>
    //<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />//
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="height=device-height">

Answer 1

由于它所依赖的Bootstrap框架，自动调整是Shiny的优点之一。

Shiny由12个你可以玩的专栏组成。

请务必使用fluidPage并充分利用column。通过这种方式，您无需打开HTML蠕虫病毒。

以下是一个例子：

shinyUI(fluidPage(

fluidRow(    
  column(6,
        textOutput("text_col1_row_1")),
  column(6
        textOutput("text_col2_row_1"))),

fluidRow( 
  column(6,
       textOutput("text_col1_row_2")),
  column(6,
       textOutput("text_col2_row_2"))),
   ))

这应该会给你一个漂亮的4 X 4网格，当你调整缩放或在不同的设备上查看它时，它会调整大小。

自动调整Shiny webapp页面以适应不同的显示器尺寸

1 个答案: