hello!
i have a web application outside of WebFlow that i’m trying to include into my WF site via an iframe.
on a desktop browser, the site looks and works perfectly fine.
however on mobile, it the iframe content has been scaled up to 200%.
the application lives at: https://mapapp.digitaldemocracyproject.org/ddp-mapapp/
and the WF site is: Digital Democracy Project | Voting Results
it almost seems like the mobile browser is loading a landscape version of the application in the iframe, even when the phone is oriented to portrait.
things i’ve tried:
- created a test page outside of WF with the same
iframeelement and attributes. it works as expected. - created a blank WF site with only this
iframeembed. it demonstrates the same behavior. - added variations of
-webkit-transform: scale(1) !important;to the iframe and to the page. no change.
i’m at a loss. it seems like nobody else in the forums is having this issue, but i don’t know what to change 
any help is greatly appreciated!
some other notes:
- my application’s css begins with
html { font-size: 100%; }and all other font sizes are specified inremunits. - various parts of the interface are specified in pixel sizes, but also scale oddly in mobile.]
- my application’s css: https://mapapp.digitaldemocracyproject.org/ddp-mapapp/style.css
it looks like this is happening because somehow WebFlow is forcing the iframe content to load in landscape orientation. i’ve changed my mobile media query to @media only screen and ((orientation: portrait) or (max-width: 450px)). somehow on WebFlow, the max-width must be > 450px even though i’m on a device with a 390px wide screen. loading the same iframe outside of WebFlow, i see the page correctly. how is this even possible?