Bootstrap, plots, and window zoom don't play nicely

shiny
1

Hi everybody,

The app of concern here is
trials.shinyapps.io/DUEshiny
("dose utility explorer")

Looks great if the browser window is set at normal zoom.
If it is zoomed in, bootstrap handles everything pretty well except the plots.
Currently I detect the initial zoom level
and give the user a warning via a JS script:

if(window.innerWidth > 3500) {
  alert('Window zoom is too low. For best appearance, please zoom in (e.g. on OSX, Cmd-plus).');
}
if(window.innerWidth < 2500) {
  alert('Window zoom is too high. For best appearance, please zoom out (e.g. on OSX, Cmd-minus).');
}

But this is a lame "solution".
I wish I could use window.innerWidth
to re-adjust the plot size.
Or better, be able to set the window.innerWidth
in the app, but changing it appears to be generally impossible with browsers.

Here's why my lame solution is even lamer than at first sight.
Clicking on the Info button brings up the app vignette in a separate window.
But the text is way too small. (BTW why is it so small???)
If you zoom in to read it, then going back to the app window,
now the plots are way too big again.

Got some ideas how to tackle this?

Thanks you for giving this a read.
=-=-=-=-=-=-=-=-=-

Let me CHALLENGE you smart people:
What about this problem?

2

Given that you can't control the user's zoom level,
I got some satisfaction this way:

In the ui:

textOutput('zoomAdvice')

In the server, here is zoomAdvice:

output$zoomAdvice = renderText({
text = ""
try({
if(input$innerWidth > 1800)
text = "Suggest zoom in. (Cmd+)"
if(input$innerWidth < 1600)
text = "Suggest zoom out. (Cmd-)"
})
paste0(text, '(', input$innerWidth, ')')
})

To make innerWidth available to R, include this javascript:

function innerWidthHandler(e) {
Shiny.onInputChange("innerWidth", window.innerWidth);
}
$(document).on(
"shiny:connected",
innerWidthHandler);
$(window).resize(
innerWidthHandler );