How do I resize an embedded mobile prototype?

Background

When you embed a mobile prototype, we generate some HTML that you can use to place an interactive version of your prototype on your website. That HTML uses an iframe to show the mobile prototype, and the size of that iframe is automatically determined by the type of mobile device (e.g. iPhone 6 Plus vs. iPhone 5s vs. iPad)  in InVision.

We sometimes get asked how to resize an embedded prototype. Though there’s currently no way to resize the embedded prototype when generating the embed code within InVision, you can tweak the size of the embedded prototype using CSS to style the iframe.

Caution: If you’re not comfortable with CSS and HTML, you may find customizing the embed code to be difficult. We’d encourage that you only try this method if you’re comfortable with CSS and HTML.

Changing the size of your embedded prototype using CSS

To tweak the size of your embedded prototype, you can do the following:

1. Generate the embed code like you normally would. The HTML looks similar to this:

   <iframe width="494" height="1010" src="//invis.io/ABCD1234" frameborder="0" allowfullscreen></iframe>
   

2. Add an inline style that contains transform: scale(0.5) so that the embed code looks like this:

   <iframe style="transform: scale(0.5)" width="494" height="1010" src="//invis.io/ABCD1234" frameborder="0" allowfullscreen></iframe>
   

3. Tweak the size of the embed by changing the number in transform: scale(0.5) to a value between 0 to 1 where 1 is full-size and 0 is infinitely small.

More Information

This method makes use of CSS transforms to resize the iframe. If you’re not familiar with CSS transforms, you can learn more about them at https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scale if you're interested.