css - 当浏览器窗口的纵横比不是 16:9 时，在闪亮的应用程序的绝对面板内调整文本和图标的大小

Question

我有一个闪亮的应用程序，当应用程序启动时，它会出现在屏幕中间的绝对面板。在上一个问题中，感谢Stéphane Laurent的帮助，我设法调整了绝对面板和其中的文本的大小，方法是为我的 UI 的每个元素使用与视口相关的宽度和高度的 CSS 单位（分别为“vw " 和 "vh") 而不是常见的 "px"。

当屏幕的纵横比几乎保持不变（大约 16:9）时，这非常有效，但是当窗口改变尺寸（例如高于宽度）时，面板会调整大小而不是文本，结果是它会推动其他绝对面板之外的 UI 元素。请在此处查看此示例。

下面是一个最小的可重现示例。请尝试调整浏览器窗口大小以检查此问题。

library(shiny)

ui <- fluidPage(

  absolutePanel(id = "initial_panel",
                fixed = TRUE,
                top = 0,
                left = 0,
                bottom = 0,
                right = 0,
                width = "34vw",
                height = "31.5vh",
                style = "background-color: white;
                         opacity: 0.85;
                         padding: 20px 20px 20px 20px;
                         margin: auto;
                         border-radius: 5pt;
                         box-shadow: 0pt 0pt 6pt 0px rgba(61,59,61,0.48);
                         padding-bottom: 2mm;
                         padding-top: 1mm;",

                fluidRow(
                  column(width = 1
                  ),
                  column(width = 10,
                         align = "center",
                         tags$p(strong("AAAAAAA AAAAAA AAAAAA"),
                                style = "font-size: 2.8vh;")
                  ),
                  column(width = 1,
                         align = "right",
                         actionButton(inputId = "close_initial_panel",
                                      label = icon(name = "times",
                                                   lib = "font-awesome"),
                                      style = "font-size: 1.5vh;
                                                 padding: 0vh 0vh 0vh 0vh;
                                                 margin-top: -9px;
                                                 margin-right: -14px;
                                                 background-color: rgba(0, 0, 0, 0);")
                  )
                ),
                fluidRow(
                  column(width = 12,
                         align = "center",
                         tags$p("BBBBBB BBBBBB BBBBBBB BBBBBBBBBB BBBBBBBB BBBBBBB BBBBBBBB BBBBBBB BBBBBBBBBBB BBBBBB",
                                style = "font-size: 1.9vh;")
                  )
                ),

  div(style = "height: 5.7vh;"),

                fluidRow(
                  column(width = 4,
                         align = "center",
                         actionButton(inputId = "explore_amr_map",
                                      label = img(src = "world_icon.png",
                                                  width = "96%",
                                                  height = "95%",
                                                  align = "center"))
                  ),
                  column(width = 4,
                         align = "center",
                         actionButton(inputId = "fill_form2",
                                      label = img(src = "location-map_icon2.png",
                                                  height = "45%",
                                                  width = "45%",
                                                  align = "center"))
                  ),
                  column(width = 4,
                         align = "center",
                         NEWdownloadButton(outputId = "download_RESBANK2",
                                           label = img(src = "download_icon.png",
                                                       height = "54%",
                                                       width = "54%",
                                                       align = "center"))
                  )
                ),
                fluidRow(
                  column(width = 4,
                         align = "center",
                         tags$p(strong("CCC CC CCCCC CCCCCCCC CCCCC"),
                                style = "font-size: 1.3vh;")

                  ),
                  column(width = 4,
                         align = "center",
                         tags$p(strong("EEEEE EEEEE EEEE EEEE"),
                                style = "font-size: 1.3vh;"),
                  ),
                  column(width = 4,
                         align = "center",
                         tags$p(strong("FFFFFFF FFFFFFFFFFFFF FFFFFFF"),
                                style = "font-size: 1.3vh;"),
                  )
                )
  )

)

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

}

shinyApp(ui, server)

例如，这可能代表智能手机上的问题。谢谢你的帮助！

标签： cssrbrowsershinywindow