Javascript 自动调整不同显示器尺寸的闪亮webapp页面_Javascript_Html_R_Shiny

Javascript 自动调整不同显示器尺寸的闪亮webapp页面

javascript html r shiny

Javascript 自动调整不同显示器尺寸的闪亮webapp页面,javascript,html,r,shiny,Javascript,Html,R,Shiny,我已经成功地使用R框架构建了一个webapp。我在谷歌地图上展示了一些要点。现在，我如何能够自动调整html页面的高度和宽度，使其在不同的显示器大小中得到最佳匹配？我也试着用html代码写东西。这个“标记$iframe（width=“1330”、height=“580”和“”部分正在使用滚动条在Internet Explorer中加载页面，但相同的设置在Chrome浏览器中显示得非常好，在同一笔记本电脑显示器中没有SCRLBAR。我们如何确保它在所有浏览器和设备（如tab、smartphone）

我已经成功地使用R框架构建了一个webapp。我在谷歌地图上展示了一些要点。现在，我如何能够自动调整html页面的高度和宽度，使其在不同的显示器大小中得到最佳匹配？我也试着用html代码写东西。这个“

标记$iframe（width=“1330”、height=“580”和“

”部分正在使用滚动条在Internet Explorer中加载页面，但相同的设置在Chrome浏览器中显示得非常好，在同一笔记本电脑显示器中没有SCRLBAR。我们如何确保它在所有浏览器和设备（如tab、smartphone）中都很好

下面是我的代码：

在UI.r内部：

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

服务器内部。r：

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

    })
})

shinyServer（功能（输入、输出）{
addResourcePath（“库”、“D:/R项目”）
输出$mypage<-renderUI({
标签$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">


////

自动调整是Shiny的一个优点，因为它依赖于引导框架

Shining由12列组成，您可以使用它们

只要确保使用并充分利用

列

。这样你就不需要打开蠕虫的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网格，当您调整缩放或在不同设备上查看它时，它将调整大小。

这是一个html页面，我正在使用谷歌地图显示一些点……它不是一个简单的网格。您是否尝试过

主面板（宽度=12）

？