How to make iframe width on mobile Safari less than 320px?

Question

I have an iframe that is sized to the size of the inner content which is smaller than the viewport. It works without problems on desktop browsers, including desktop Safari. However, on mobile Safari, when the content width is less than 320px, the iframe stays at a width of 320px. How can I make an iframe in mobile Safari to be a width less than 320px?

UPDATE: SOLVED. This had to do with the default setting in the frontend framework (Semantic-UI) that was used, which had a min-width of 320px set on the body tag. Overriding this setting on the body tag solved this issue.

Possible duplicate of [How to get an IFrame to be responsive in iOS Safari?](http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari) — Adam Buchanan Smith, May 12 '16 at 22:15
I'm not sure how being same- or cross-domain is relevant in this context? The problem exists either way. I have control over the content of the iframe and the parent. The question is not really about the content, but the sizing of the iframe on mobile Safari. — user1647525, May 12 '16 at 22:21
Thanks for the contributions, but it had nothing to do with responsiveness. It had to do with a min-width default setting in the frontend framework that was used for the content within the iframe. — user1647525, May 13 '16 at 05:00

score 0 · Answer 1 · answered May 12 '16 at 22:11

0

In the past, I have seen many problems with mobile Safari, and this one seems to fit in to the problems of mobile Safari. Here is my recommendation: research AJAX, and get the code of a webpage, and copy and paste it into a div. http://www.w3schools.com/ajax/default.asp

answered May 12 '16 at 22:11

pepperjack

673
6
20

If you need help with this after researching, add a comment here. – pepperjack May 12 '16 at 22:12
Thanks for your response, it's appreciated, but this doesn't answer the question nor solve the problem. The use of AJAX also seems irrelevant. – user1647525 May 12 '16 at 22:17
Post source code. With your issue with view port meta tag, search how to inject code into an IFrame. – pepperjack May 12 '16 at 22:20

score 0 · Accepted Answer · answered May 13 '16 at 04:47

0

Thanks to those who contributed, but I solved my own problem. The problem was that the content within my iframe was using the Semantic-UI framework which had a min-width of 320px set on the body. I simply overrode it by setting min-width to 0 on body.

answered May 13 '16 at 04:47

user1647525

311
3
14

How to make iframe width on mobile Safari less than 320px?

2 Answers2