Iframe responsive mode for mobile devices [closed]

Navigation
0

Can someone tell me how to make a iframe responsive to mobile devices?

    
asked by anonymous 22.04.2015 / 18:09

1 answer

1

Example using boostrap: 

<div class="col-lg-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d467688.89495119266!2d-46.5952992!3d-23.6824124!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o+Paulo+-+SP!5e0!3m2!1spt-BR!2sbr!4v1429724267414"width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>

Example using any div:

HTML 

<div id="MolduraIframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d467688.89495119266!2d-46.5952992!3d-23.6824124!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o+Paulo+-+SP!5e0!3m2!1spt-BR!2sbr!4v1429724267414"width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>

CSS 

#MolduraIframe{
// Defina as resoluções para adaptar o tamanho conforme cada caso
@media (max-width:100px){
// Defina o tamanho que o objeto terá com tal resolução
}
}

In summary: You should put width and height to 100% and adapt it to the base of a% responsive external%.

If you want to change the content of the IFRAME and make it responsive, that's another story. I suggest you read: this , this and also, this

    
22.04.2015 / 19:41
data record via ajax I can not access class data already instantiated