Отзывчивый контент в iframe не реагирует на iPad

У меня есть отзывчивый сайт, но при загрузке в iframe сайт больше не реагирует на iPad, хорошо работая на ПК и Mac. IFrame имеет 100% ширину, но по-прежнему показывает горизонтальную прокрутку на iPad, работая на всех браузерах для ПК и Mac.Отзывчивый контент в iframe не реагирует на iPad

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

источник

2014-01-21 Marco Marsala

Я обнаружил, что указание фиксированной ширины для iframe устраняет проблему. Но когда я ставлю width = 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

ответ

Смежные вопросы