4

我有一个网站试图以移动格式显示，但在宽屏幕上。我相信 iframe 是要走的路。

我正在尝试将 iframe 加载到 iPhone 的图像中。你可以在这里看到一个例子。

一旦你看到它，你应该能够知道我在做什么。

我已经把这个 CSS 写下来，以允许 iframe 显示在 iPhone 屏幕内......

/*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;
}

这是相关的 HTML... 

   <div id="over"><iframe src="http://webfro.gs/south/tour"></iframe></div>
        <iframe src="http://www.google.com">
            You don't have iframe support, unfortunately
        </iframe>
    </div>

问题...

我不知道为什么，但我被迫将那个 iframe 片段与谷歌网站一起保存在那里。如果我把它拿出来，那么手机图像就不会显示。

这是为什么？

这是最好的方法吗？外面的东西更容易吗？

让它在 IE8 中显示似乎是另一场噩梦。

有什么想法吗？

4

1 回答 1

10

好的，首先我们需要稍微更改一下 html。所有你需要的是：

<div id="over">
    <iframe src="http://webfro.gs/south/tour"></iframe>
</div>

然后对于CSS：

#over {
    background-image: url("../images/iphone5_hollow_750x380.png");
    background-repeat: no-repeat;
    height: 380px;
    width: 750px;
    margin: 0 auto 30px;
    position: relative;
}

iframe {
    height: 321px;
    width: 483px;
    position: absolute;
    top: 28px;
    left: 134px;
}
于 2013-07-05T23:09:51.440 回答