Making htmlwidgets in Rmarkdown mobile friendly

Question

The default options of rmarkdown is to set the fig.width = 12. I would like it to auto-adujust for the width of a mobile device if this is possible.

I'm hosting the following Rmarkdown at http://akdata.org/misc/leafletmobile

---
title: "Untitled"
output: html_document

---


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

It will adjust to the width of the screen when I play with different mobile devices in chrome devtools though. I have a physical Samsung Galaxy 5 that I'm testing with.

score 7 · Accepted Answer · answered Mar 24 '16 at 21:39

I think specifying a percentage width will give you the result you want. Below is how you would do it in rmarkdown and here is a live example. Unfortunately, if you specify a percentage height also, your screen will appear blank due to some bug somewhere, so it is not completely responsive, but it still adjusts nicely on my 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)
)
```

Thanks. This makes sense to me. – cylondude Mar 26 '16 at 02:36 — cylondude, Mar 26 '16 at 02:36

score 2 · Answer 2 · answered Mar 22 '16 at 01:28

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

This block of code appears near the bottom of the source. The dimensions can be made to percentages, and it will auto-resize to fit the screen. Any percentages should work. Also, position: absolute is required to ensure that it stays in the correct location.

Note: I would recommend finding a way to shorten those massive links in the page source.

Making htmlwidgets in Rmarkdown mobile friendly

2 Answers2