How to adjust the content size of an iframe?

user14360885 0
Viewed 21

I am working with an Iframe and I can only set the dimensions of the iframe. The problem is that the iframe has to look "good" with a mobile device. I can't work with the website that contains the iframe.

On the laptop it works fine however, when I use the website where there is the iframe on the mobile device the sizes are too big.

I did put this inside on the iframe page: <meta name="viewport" content="width=device-width, initial-scale=1.0">

I would like to shrink all the elements that are in the iframe in the way that can fit the iframe nicely.

How can I achieve this? Should I add a css class?

iframe javascript css html
1 Answers

Replace the Example Iframe with yours and also add the class

class="resized"

to your IFrame 

.resizer { display:flex; margin:0; padding:0; resize:both; overflow:hidden }
.resizer > .resized { flex-grow:1; margin:0; padding:0; border:0 }

.ugly { background:red; border:4px dashed black; }
<div class="resizer ugly">
  <iframe class="resized" src="https://wikipedia.org/"></iframe>
</div>

Game dev0
Related