使 Rmarkdown 中的 htmlwidgets 移动友好

Question

rmarkdown 的默认选项是设置 fig.width = 12。如果可能的话，我希望它能够自动调整移动设备的宽度。

托管以下 Rmarkdown

---
title: "Untitled"
output: html_document

---


```{r}      
  library(leaflet)
  leaflet() %>% addTiles()
``

虽然我在 chrome devtools 中玩不同的移动设备时它会调整到屏幕的宽度。我有一台正在测试的实体三星 Galaxy 5。

Answer 1

<div id="htmlwidget-4092" style="width:75%; height:75%; position:absolute" class="leaflet html-widget"></div>

此代码块出现在源代码底部附近。可以将尺寸设置为百分比，并且它会自动调整大小以适合屏幕。任何百分比都应该有效。此外，需要 position: absolute 以确保它位于正确的位置。

注意：我建议找到一种方法来缩短页面源中的那些大量链接。

Answer 2

我认为指定百分比 width 会给您想要的结果。以下是您在 rmarkdown 中的操作方式，这里是 live example。不幸的是，如果您还指定了一个百分比 height，由于某处的一些错误，您的屏幕将显示为空白，因此它不能完全响应，但它仍然可以很好地适应我的 iPhone。

---
title: "responsive_leaflet"
author: "TimelyPortfolio"
date: "March 24, 2016"
output:
  html_document:
   mathjax: null
---

```{r echo=FALSE, warning=FALSE}
# no help from a framework
#  just percentage height and width
library(leaflet)

l <- leaflet(width="100%") %>%
  addTiles()
l
```

```{r echo=FALSE, warning=FALSE}
# demonstrate with Bootstrap
library(shiny)

fluidRow(
  column(width=10,l)
)
```

使 Rmarkdown 中的 htmlwidgets 移动友好

Making htmlwidgets in Rmarkdown mobile friendly

html

css

r

r-markdown

htmlwidgets