我基本上是在尝试将iframe嵌入到我的一个网站中。当我把iframe放在网站上时,它在移动设备上不起作用——这意味着响应能力丧失,而且它没有按比例缩放,请查看这里的
但是,当我把相同的iframe放在一个PLAIN HTML文件上时,它完全响应了。检查此处
你能告诉我这里出了什么问题吗?我在想CSS冲突?
感谢您的帮助!
当我访问您的网站时,iframe
没有响应,因为iframe的宽度和高度设置为inline。您需要通过CSS设置(或更改)以使其响应。
纯HTML文件中的iframe是"响应的",因为它只显示整个页面,因为没有视口集。(在您的主网站中,这是视口:<meta name="viewport" content="width=device-width, initial-scale=1">
)。它感觉有反应,但不是。
所以你需要做的是:
- 删除iframe上设置的内联高度和宽度
- 在CSS中添加代码,使iframe具有响应性。请看下面我的小例子,了解如何做到这一点。使用它来满足您的需要(和视口)
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 50%;
background: lightgrey;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
}
<div class="iframe-container">
<iframe src="http://spreadshirt.com/"></iframe>
</div>
只需在iframe中的pdf URL后面添加#view=FitH
。
示例:
<div class="iframe-container">
<iframe src="http://example.com#view=FitH"></iframe>
</div>
然后使用上面罗伊提到的CSS。它将符合响应屏幕的pdf格式。