I have a site I'm trying to display in a mobile format, but on a wide screen. I'm convinced the iframe is the way to go.

I'm trying to load the iframe inside an image of an iPhone. You can see an example here.

Once you see it, you should be able to tell what I'm trying to do.

I've got this CSS down to allow for the iframe to be displayed inside the iPhones screen...

Code:
/*iframe Overlay*/
#over{
    position: absolute;
    top: 84px;
    left: 133px;
    width: 485px;
    height: 320px;
}

iframe{
    width: 100%;
    height: 550px;
    background-image: url(../images/iphone5_hollow_750x380.png);
    background-repeat: no-repeat;
}
And here's the associated HTML...

I have no idea why, but I'm being forced to keep that iframe snippet with the google website in there. If I take that out, then the phone image doesn't display. I have no idea what the Google website has to do with my image.

Why is that?

Is this the best way to do this? Something easier out there?

Getting this to display in IE8 seems to be a whole other nightmare.

Any thoughts?