Question

I am writing an app with jQuery Mobile that will act as a preview of a native mobile app, inside a browser.

I am intending to place the webapp in an iframe that will be like a small smartphone simulation. The legibility of the text is not important, only the colors, images and the overall look-and-feel.

The problem is that the in our website the preview area is small (height="330" width="220") and everything appears cramped (the text, buttons, etc have normal size but appear big compared to the iframe dimensions).

I tried to apply font-size: 50%; or width: 220px; height: 330px; in the body of the mobile app but no luck. Also the meta viewport didn’t help.

My iframe is something like this:

<iframe id="webapp" frameborder="0" height="330" width="220"
  src="http://jquerymobile.com/demos/1.1.0/">​

I need to make the JQM webapp smaller or “zoomed out”, but could not find a good solution.

Answer 1

After some stubborn research I found an elegant way to shrink the webapp inside the iframe. By using CSS3 2D transforms:

transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5); /* IE 9 */
-moz-transform:scale(0.5,0.5); /* Firefox */
-webkit-transform:scale(0.5,0.5); /* Safari and Chrome */
-o-transform:scale(0.5,0.5); /* Opera */

This style will make the iframe 50% smaller.

The downside is that only IE9+ is supported, but this is ok as we all hate IE. Right?