创建响应式iFrame

我在Markeo（一种营销自动化软件工具）中创建了一个响应式登录页面。以下是Marketo提供的网址：http://info.onvia.com/responsive.html 创建响应式iFrame

我想要做的事情是在我的网站（www.Onvia.com）上显示该网址，并保持其响应。我认为创建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;}

来源

2016-02-12 user3075987

在桌面上，它创造了双套的滚动条。在手机上，它不像一个响应式页面。 – user3075987

转到http://info.onvia.com/xchange.html，它是404（页面不存在） – zer00ne

很抱歉，将它更改为info.onvia.com/responsive.html – user3075987

您可以使用此代码

iframe, object, embed { 
    max-width: 100%; 
}

来源

2016-02-12 19:17:59

我在哪里放置该代码？ – user3075987

以及您的CSS –

尝试使用下面的代码

<!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>

来源

2016-02-12 19:55:03 Microsmsm

创建响应式iFrame

回答

相关问题