如何让Shiny的pickerInput仅在移动端启用mobile=TRUE？

想让mobile=TRUE只在移动端生效，桌面端正常显示pickerInput，可以试试这两种方法：

方法一：服务器端识别设备，动态生成选择器 #

用Shiny自带的请求信息判断用户是不是用移动设备访问，然后动态设置mobile参数，这样初始化的时候就直接用对应配置，不会有界面闪烁。

完整代码：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  uiOutput("dynamic_picker")
)

server <- function(input, output, session) {
  
  # 判断是否是移动设备
  is_mobile <- reactive({
    user_agent <- session$request$HTTP_USER_AGENT
    # 匹配常见移动设备的标识
    grepl("Mobile|Android|iPhone|iPad|iPod|BlackBerry|Windows Phone", user_agent, ignore.case = TRUE)
  })
  
  # 根据设备类型生成pickerInput
  output$dynamic_picker <- renderUI({
    pickerInput(
      inputId = "Title_picker_input",
      label = "",
      choices = c("A", "B", "C"),
      multiple = TRUE,
      options = pickerOptions(
        mobile = is_mobile()
      )
    )
  })
}

shinyApp(ui = ui, server = server)

方法二：前端JS动态切换配置 #

不想靠服务器判断的话，直接在浏览器里用JS检测设备，页面加载后再修改picker的设置：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  pickerInput(
    inputId = "Title_picker_input",
    label = "",
    choices = c("A", "B", "C"),
    multiple = TRUE,
    options = pickerOptions(
      mobile = FALSE # 默认桌面端用普通样式
    )
  ),
  tags$script(HTML("
    // 判断是不是移动设备
    function isMobileDevice() {
      return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1);
    }
    
    // 页面加载完成后调整picker配置
    $(document).ready(function() {
      if(isMobileDevice()) {
        $('#Title_picker_input').selectpicker('setOptions', { mobile: true });
        $('#Title_picker_input').selectpicker('refresh');
      }
    });
  "))
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

说明 #

• 服务器端方案：从根上匹配设备类型生成对应配置，兼容性好，不会有界面切换的闪烁问题。
• 前端方案：直接在浏览器端判断，无需服务器交互，适合不想改动服务器逻辑的场景。

两种方案都能实现移动端启用原生选择器，桌面端保持pickerInput原有样式的需求，解决同时设置multiple=TRUE和mobile=TRUE在桌面Chrome/Edge里的显示异常问题。

内容的提问来源于stack exchange，提问作者anorlondo