Question

I’m serving a page for phones and tablets. I am using OpenX to serve advertising on there. The advertising should be loaded in an iframe which should be the width of the page. I’m using bootstrap.

I tested things with this code:

<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>

This makes an iframe that’s the exact same width as the browser window. Problem is that if I open this on an iphone it will rescale the iframe to the size of the window loaded in it, and that’s very unwanted behaviour. It doesn’t do it on my desktop, only on the iphone. I haven’t tested yet with other smartphones.

Basically what I’m looking for is an iframe that is the same width as the screen (100%) and doesn’t rescale when I load a bigger page in it

Answer 1

I’m pretty sure you are looking for the viewport meta tag to control this. Here is a reference that will explain it completely: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Basically you want to drop this code into your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">