Ajar Productions

This most frequently comes up when creating responsive content inside of Wordpress.

First, make sure to set the Mobile Viewport Zoom to Use Desktop Scaling, re-export, upload, so it will work on mobile as well.

To make the content responsive, to width should be set to 100% (shown in this article), not a pixel value (this can be done with the in5 Wordpress Embed Plugin).

Even then the content may not scale down in iOS to the width of the screen (especially in Portrait mode).

The issue is an iOS bug that causes the iframe to be significantly wider than the screen.

In this case, apply the following CSS to your iframe (or as part of your Wordpress theme) and it should fix the issue.

iframe {
  width: 1px;
  min-width: 100%;
}

(You may want to apply this as a class, so that it doesn't affect your other iframes).

Sources:

• https://stackoverflow.com/questions/20123960/how-to-get-iframe-width-100-in-iphone-portrait-view/20142280
• https://stackoverflow.com/questions/16937070/iframe-size-with-css-on-ios