html - Website in full screen iFrame not scaled properly -


i've problem full screen iframes on mobile browsers. responsive website doesn't scale when in full screen iframe. i've tried using other solutions, don't seem work.

this how looks when it's not in iframe.

https://i.stack.imgur.com/xztrv.png

however, looks when in full screen iframe. https://i.stack.imgur.com/cbe2z.jpg

on desktop iframe works fine.

this code i'm using.

<iframe src="https://something.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">  </iframe>

i have tried following, problem persists.

<div class="iframe-container">       <iframe src="https://something.com"></iframe>  </div>       <style type="text/css">  .iframe-container {    position: relative;    width: 100%;    padding-bottom: 50%;    background: lightgrey;  }    .iframe-container iframe {    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;    right: 0;    bottom: 0;    border: 1px solid red;  }  </style>    

thanks!


Comments