Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set the width of an iframe in iOS6?

I have an iframe that must be embedded on some websites and it is not well displayed on iPhones. This is because the width attribute (probably height as well) is ignored by mobile Safari.

Is there any workaround?

Thanks!

like image 381
watt Avatar asked May 26 '14 08:05

watt


2 Answers

Although width is ignored, min-width isn't. So something like this has the same effect as width:100%:

iframe {
  width: 1px;
  min-width: 100%;
}
like image 67
Patrick Avatar answered Sep 24 '22 17:09

Patrick


The width parameter of the iframe is ignored in mobile Safari so the width must be set in px with CSS.

I fixed the problem by checking the user agent with JavaScript. If it's an iOS device, I set the width of the iframe in px with CSS to be the exact size as the container.

like image 25
watt Avatar answered Sep 22 '22 17:09

watt