Mobile iframe responsive user error

Hi there!

I’ve been able to get a nodejs application going that displays two dashboards side by side. I’ve added a bit of logic that only displays one of the dashboard if the user-agent on the http request contains iPhone or iPod.

However, what I’m noticing is that the iframe renders are not resizing to show stacked boxes (not sure how to describe this, but when you zoom in so far that it simply stacks the tiles on top of each other.).

Two tries at this so far, the first making the width 100%, the second making the width 640 px per a quick Google of iPod Touch screen width.

iframe(
src= locals.src0
frameborder=“0”
width="100%"
height=“100%”
style=“overflow:hidden; border:none;”
)

iframe(
src= locals.src0
frameborder=“0”
width="640"
height=“100%”
style=“overflow:hidden; border:none;”
)

Ideally I would like the mobile version of the served page to make the tiles responsive and larger, therefore easier to read on a smaller device. Any thoughts?

Went hunting around and found this thread: Embedded dashboard responsiveness woes

I modified my iframe to be the exact pixel specs and the boxes now stack but the text is very small.

iframe(
src= locals.src0
frameborder=“0”
width="640"
height="1136"
style=“overflow:hidden; border:none;”
)

1 Like