[英]How do I make my iframe responsive for all devices?
我不是HTML，CSS或JavaScript方面的专家，但是我有这个网站，需要在所有设备上响应。 但是，由于某种原因，它似乎无法正常工作，当我在移动网络浏览器上查看网站时，会产生很大的空白空间：
这是它的代码：
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <style media="screen"> body { background-color: #f0f0f0; font: 1em verdana, arial, helvetica, sans-serif; line-height: 0px; } h1,h2 { font-size: 2em; color: #f00; text-align: center; text-shadow: 0 0 0.06em #000,0 0 0.12em #000; } .af-textWrap { display: block; text-align: center; color: #b7b7b7; } .af-element { text-align: center; } #awf_field-90534028, #awf_field-90534029 { display: block; width: 98%; max-width: 28.125em; margin: auto; text-align: left; } .image { display: block; width: 98%; max-width: 30em; height: auto; margin: auto; } </style> </head> <body> <div id="worked"></div> <script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%"> </div></div></div> <h1>Offer Ends In:</h1> <h2 id="time"></h2> <!-- AWeber Web Form Generator 3.0.1 --> <form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post"> <input name="meta_web_form_id" type="hidden" value="604218668"> <input name="meta_split_id" type="hidden" value=""> <input name="listname" type="hidden" value="awlist4661276"> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true"> <input name="meta_adtracking" type="hidden" value="My_Web_Form"> <input name="meta_message" type="hidden" value="1"> <input name="meta_required" type="hidden" value="name,email"> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..."> <div id="af-form-604218668" class="af-form"> <div id="af-body-604218668" class="af-body af-standards"> <div class="af-element"> <label class="previewLabel" for="awf_field-90534028"></label> <div class="af-textWrap"> <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name..."> </div> </div> <div class="af-element"> <label class="previewLabel" for="awf_field-90534029"></label> <div class="af-textWrap"> <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email..."> </div> </div> <div class="af-element buttonContainer"> <input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/> </div> <div class="af-element privacyPolicy"> <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p> <div class="af-clear"> </div> </div> </div> </div> <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt=""> </div> </form> <!-- /AWeber Web Form Generator 3.0.1 --> <script> (function() { 'use strict'; var handler = function() { if (--sec < 0) { sec = 59; if (--min < 0) { min = 0; sec = 0; } } var min1 = '0' + min + 'm'; var min2 = min + 'm'; var sec1 = '0' + sec + 's'; var sec2 = sec + 's'; var col = ':'; document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); }; var sec = 0; var min = 15; handler(); setInterval(handler, 1000); }()); </script> </body> </html>
看来您的iframe是由JavaScript注入的，所以我个人建议向您的代码中添加setInterval()来监视iframe元素。 iframe元素可用后，将body放入iframe并将其margin设置为0 。
$(function() { $('#test').append('<iframe src="http://www.w3schools.com"></iframe>'); var timer = setInterval(function() { $('iframe').load( function() { $('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>")); clearInterval( timer ); // Clear the interval }); }, 10); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> </div>
如何使iframe分辨率响应以完全适合其所在的iframe？
[英]How do I make the iframe resolution responsive to fully fit the iframe that it is in?
试图让我的网站在所有设备上响应，尤其是在手机上
[英]Trying to make my site responsive on all devices especially on mobile phones
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.