Question

我有一个快速响应的网站，但当加载到iframe时，该网站在iPad上不再响应，而在PC和Mac上运行良好。 iframe的宽度为100％，但在iPad上仍可显示水平滚动，同时适用于所有PC和Mac浏览器。

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

Answer 1

问题出在框架网站本身。

工作小提琴：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%; }

Answer 2

这是我的解决方案＆gt;＆gt; iframe + jquery，像魅力一样工作。 jsfiddle＆gt;＆gt; 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>

iframe中的响应内容在iPad上无响应

2 个答案: