R Shiny 应用程序检测手机

Question

我有一个闪亮的应用程序（实际上是一个交互式 R Markdown 报告），我想根据用户是否在移动设备上对其进行格式化。我发现g3rv4的这篇博客文章描述了如何测试这一点，但我无法让它在下面的示例应用程序中工作。

https://g3rv4.com/2017/08/shiny-detect-mobile-browsers

我是一名建模者，而不是程序员，所以我可能在 Javascript 方面做错了一些事情。我没有收到错误，但没有收到任何输出textOutput('isItMobile')。

# shiny example from
# https://shiny.rstudio.com/tutorial/written-tutorial/lesson1/
# mobile detect code from
# https://g3rv4.com/2017/08/shiny-detect-mobile-browsers
library(shiny)

onStart <- function(input, output) {

  ### function to detect mobile ####
  mobileDetect <- function(inputId, value = 0) {
    tagList(
      singleton(tags$head(tags$script(src = "js/mobile.js"))),
      tags$input(id = inputId,
                 class = "mobile-element",
                 type = "hidden")
    )
  }

}

# Define UI for app that draws a histogram ----
ui <- fluidPage(

  # App title ----
  titlePanel("Hello Shiny!"),

  mobileDetect('isMobile'),
  textOutput('isItMobile'),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)

    ),

    # Main panel for displaying outputs ----
    mainPanel(

      # Output: Histogram ----
      plotOutput(outputId = "distPlot")

    )
  )
)

# Define server logic required to draw a histogram ----
server <- function(input, output) {

  output$isItMobile <- renderText({ 
    ifelse(input$isMobile, "You are on a mobile device", "You are not on a mobile device")
  })

  # Histogram of the Old Faithful Geyser Data ----
  output$distPlot <- renderPlot({

    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

  })

}

# this is how you run it
print('Running Simple Shiny App - Hit ESC to quit.')
shinyApp(ui = ui, server = server, onStart = onStart)

这是www/js/mobile.js文件：

var isMobileBinding = new Shiny.InputBinding();
$.extend(isMobileBinding, {
  find: function(scope) {
    return $(scope).find(".mobile-element");
    callback();
  },
  getValue: function(el) {
    return /((iPhone)|(iPod)|(iPad)|(Android)|(BlackBerry))/.test(navigator.userAgent)
  },
  setValue: function(el, value) {
  },
  subscribe: function(el, callback) {
  },
  unsubscribe: function(el) {
  }
});

Shiny.inputBindings.register(isMobileBinding);

Answer 1

这是一种根据屏幕尺寸检测（小型）移动设备的方法。请注意，这故意排除了屏幕较大的平板电脑。

以下代码片段检查屏幕尺寸是否低于 768px，并将结果使用onInputChange名为 的输入发送到 Shiny 服务器is_mobile_device。该检查仅在页面加载且 Shiny UI 完成加载时进行一次。

将其放入 JS 文件中并将其包含在您的 UI 中（例如，就像在问题中使用 完成的那样tags$script）：

$(document).on('shiny:sessioninitialized', function (e) {
  var mobile = window.matchMedia("only screen and (max-width: 768px)").matches;
  Shiny.onInputChange('is_mobile_device', mobile);
});

浏览器支持： http: //caniuse.com/#feat=matchmedia

在你的 Shinyserver函数中，你可以定义 areactive来检索值：

server <- function(input, output, session) {
    is_mobile_device <- reactive(isTRUE(input$is_mobile_device))
    # ...
}

对于在 JavaScript 端检测移动设备的其他方法（例如基于用户代理也包括平板电脑），请查看此处的优秀答案：

• 在 jQuery 中检测移动设备的最佳方法是什么？
• 检测移动浏览器