iframe中的响应内容在iPad上没有响应

我有一个响应网站，但是当加载到iframe中时，该网站在iPad上无法响应，而在PC和Mac上运行良好。 iframe具有100％的宽度，但仍然在iPad上显示水平滚动，同时在所有PC和Mac浏览器上工作。iframe中的响应内容在iPad上没有响应

http://www.genovaperte.it/item/hostaia-del-missionario/web

来源

2014-01-21 Marco Marsala

我发现，指定固定宽度的iframe解决该问题。但是，当我把宽度= 100％，它显示了问题。我需要可变宽度。 –

的问题是在陷害网站本身。

工作小提琴：http://jsfiddle.net/K64Mm/6/ 正在与一个 “好” 的回应式网站例如：http://www.genovaperte.it/item/ristorante-zeffirino/web

</div> 
    <div class="content"> 
     <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe> 
    </div> 
</div> 

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; } 

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
.top { height: 45px; background-color: red; } 
.content { height: 100%; width: 100%; overflow: auto !important; } 
.content iframe { display: block; border: none; width: 100%; height: 100%; }

来源

2014-01-21 09:07:51

这里是我的解决方案>> IFRAME + jQuery和像一个魅力的工作。的jsfiddle >>http://jsfiddle.net/leowebdev/6NSX3/

<html lang="en" class="no-js"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
     <style> 
     html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
     var calcHeight = function() { 
      $('#preview-frame').height($(window).height()); 
     } 

     $(document).ready(function() { 
      calcHeight(); 
     }); 

     $(window).resize(function() { 
      calcHeight(); 
     }).load(function() { 
      calcHeight(); 
     }); 
     </script> 
    </head> 
    <body> 
     <iframe id="preview-frame" src="http://yourwebsitehere.com/" name="preview-frame" frameborder="0" noresize="noresize"> 
     </iframe> 
    </body> 
</html>

来源

2014-08-05 21:38:44 leowebguy

iframe中的响应内容在iPad上没有响应

回答

相关问题