google apps script - Force Bootstrap to render mobile friendly -

i'm working on responsive design using google apps scripting , have run issues. site contents piped through iframe sandbox prevents me setting meta viewport. means no matter device view application on, it's treated desktop application.

for example, viewing web app on galaxy s4 shows full 1080x1920 view.

google creates sandbox iframe , sets resolution of device. don't let create meta element , creating via javascript won't can't modify contents outside of sandbox. once page has loaded, can scale window , elements resize expected, me no on mobile device.

the best can come retrieve navigator.useragent after page has loaded , modify each element after fact. far ideal.

so, there way trick bootstrap rendering mobile or stuck writing media queries , custom css?

i had similar problem (within modal, not iframe) created pretty lengthy basic css page solve it:

https://github.com/shawntaylor/bootstrap-force-device

once add css file project, call force-xs (or force-sm, force-md or force-lg) on parent div of content want force. css forces inner content behave it's on xs device.

<span class="force-sm">   <div class="col-sm-6 col-md-4">     <h1>i want make behave it's on sm device</h1>     <h2>even when it's on desktop</h2>     <p>or within window thinks it's desktop</p>     </div> </span>