針對不同顯示器尺寸的Shiny webapp頁面的自動調整

我已經使用R Shiny框架成功構建了一個webapp。我在這裏展示了Googlemap的一些觀點。現在我怎樣才能自動調整HTML頁面的高度和寬度，以便在不同的顯示器尺寸下最適合？我試圖把東西放在HTML代碼中。此「tags$iframe(width="1330", height="580",」部分是在Internet Explorer中使用滾動條加載頁面，但相同設置在Chrome瀏覽器中顯示效果非常好，而且在同一檯筆記本電腦顯示器中沒有Scrllbar。我們如何確保它在所有瀏覽器和設備（如選項卡，智能手機）中都很好？針對不同顯示器尺寸的Shiny webapp頁面的自動調整

下面是我的代碼：

內部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">

來源

2015-07-11 pmr

Auto adju由於Bootstrap框架依賴於它，所以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×4格在調整變焦將調整或查看它在不同的設備。

來源

2015-07-11 08:34:18

這是一個html頁面，我使用googlemap顯示了一些點.....它不是一個簡單的網格 – pmr

你試過'mainPanel（width = 12）'嗎？ –

針對不同顯示器尺寸的Shiny webapp頁面的自動調整

回答

相關問題