1

I have an image of an iphone that is 400x760. Within the image I am loading a responsive site with an Iframe. It all works great, except that the content from the iframe is barely readable it looks very zoomed out so the page while it is responsive it doesn't look like it would on a real phone. I tried the following so far: I created a css class and increased the zoom alot, and it works. The site looks like it would on a mobile device. But zoom doesn't work in firefox and other browsers. I am using jquery mobile for the responsive site.

.mobile_zoom .ui-content,
.mobile_zoom .ui-header-fixed-logo,
.mobile_zoom .icon-settings,
.mobile_zoom .icon-search,
.mobile_zoom .ui-footer                                    {zoom: 370%;}
elodev
  • 243
  • 8
  • 21
  • http://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css (while it has been some time since the accepted answer, it is still valid - there's no support of zoom in FF, you can emulate it by using transform, same with Opera) – eithed Dec 02 '13 at 16:24

1 Answers1

2

You might need a <meta> tag on your iframed HTML page like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This should tell the browser to render the page at the device's width.

Matt Andrews
  • 2,868
  • 3
  • 31
  • 53