小编Sch*_*ock的帖子

如何使 iframe 适应移动设备?

我正在尝试将 iframe 对象嵌入到我的 WordPress 网站的页面上。我可以嵌入 iframe,但是该对象会超出移动设备的屏幕。这是我要嵌入的 iframe

<div style="display:block;margin:0;padding:0;border:0;outline:0;font-size:10px!important;color:#AAA!important;vertical-align:baseline;background:transparent;width:1000px;">
  <iframe frameborder="0" height="1000" scrolling="no" src="https://secure.rightsignature.com/templates/7304f97a-bbbb-4dc7-b48d-6d6a5ac41b5c/template-signer-link/267cd399a88df2a2616ab109b61f7bb5" width="1000"></iframe>
</div>
Run Code Online (Sandbox Code Playgroud)

我尝试用 div 类包装上面的整个代码:

div class="right-signature"

然后使用我在另一篇论坛文章中找到的以下 CSS:

.right-signature {
    position: relative;
    padding-bottom: 50%;
    height: 0;
    overflow: hidden;
}
.right-signature iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

但我没能成功地让它发挥作用。有谁知道我可以做些什么来使其适用于移动设备?

css embed wordpress iframe mobile

4
推荐指数
1
解决办法
3万
查看次数

标签 统计

css ×1

embed ×1

iframe ×1

mobile ×1

wordpress ×1