我有一个网站,我试图以移动格式显示,但在宽屏幕上显示。我确信 iframe 是要走的路。
我正在尝试将 iframe 加载到 iPhone 的图像中。你可以看到一个例子 here .
一旦你看到它,你应该能够知道我在做什么。
我已经放下了这个 CSS 以允许在 iPhone 屏幕内显示 iframe...
/*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 中显示似乎是另一个噩梦。
有什么想法吗?
最佳答案
好的,首先我们需要稍微改变一下 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;
}
关于css - 将图像作为框架放在 iframe 周围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17497613/