When embedding in5 exports from InDesign, your content may appear too wide on iPhones.
If you’ve exported responsive HTML5 content using the in5 plugin from Adobe InDesign and embedded it into a website using an <iframe> (such as in WordPress), you might notice the content doesn’t scale down properly on iPhones—particularly in portrait mode.
This is a known iOS bug that affects how iFrames are rendered, not an issue with in5 or your export settings.
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).
Again, the issue is an iOS bug that causes the iframe to be significantly wider than the screen.
You can fix this issue by applying a simple CSS rule to the iframe (or as part of your Wordpress theme) that contains your in5 export. This CSS ensures the iframe scales correctly within the iOS viewport:
iframe {
width: 1px;
min-width: 100%;
}
This CSS "hacks" the rendering behavior by forcing the iframe to respect its container's width - ensuring your in5 content fills the screen properly on iPhones.
(You may want to apply this as a class, so that it doesn't affect your other iframes).
If your in5 export from InDesign isn't scaling correctly on iPhones, don't worry - it is not your fault. A small CSS adjustment solves the issue, letting your interactive HTML5 content display beautifully across all devices.
Sources: