html - 创建响应式 iFrame

标签 html css

我在 Markeo(一种营销自动化软件工具)中创建了一个响应式登录页面。这是 Marketo 提供的 URL:http://info.onvia.com/responsive.html

我想做的是在我的网站 (www.Onvia.com) 上显示该 URL 并让它仍然响应。我认为创建 iFrame 并从 Marketo 引入该 URL 的唯一方法。我的问题是当该 URL 被引入 iFrame 时,它​​不会在手机上响应。我仍然需要放大才能看到内容。

这是我的 jsfiddle:http://jsfiddle.net/huskydawgs/3LAat/334/

HTML:

<div class="container">
<div class="h_iframe">
    <iframe  src="http://info.onvia.com/responsive.html" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

html,body        {height:100%; margin:0;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%; margin:0;}

最佳答案

尝试使用下面的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html, body { height: 100vh; }
    iframe {
      height:350%;
      width:100%;
  </style>
</head>
<body>
  <iframe src="http://info.onvia.com/responsive.html" frameborder="0"></iframe>
</body>
</html>

关于html - 创建响应式 iFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35370415/

相关文章:

html - 在 div 标签内添加 <br> 标签失败

javascript - 使用 HTML 和 CSS 绘制带有填充的圆弧

jquery - 使用 jQuery 更改背景位置

javascript - CSS ul 受到另一个 ul 的影响

html - 仅在移动设备上图像周围的空白 - wordpress

javascript - 如何取消绑定(bind)元素内的所有事件

javascript - Mac Safari 单个 TABLE 即使在空的时候也是 1px 宽

html - 如何在 Joomla 1.5.20 中为文章添加自定义 CSS?

angularjs - 使用 ng-repeat 创建包含两列的表

html - 有什么简单的方法可以确定影响 HTML 元素大小的因素吗?