iframe обрезается в div на мобильном сафари - PullRequest
Новая
       0

iframe обрезается в div на мобильном сафари

8 голосов
/ 28 февраля 2012

Я бы хотел scale iframe на mobile safari.

Я включаю iframe внутри div. 

<html>
<body>
    <div id="iframe_container">
        <iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/>
    </div>
</body>
</html>

Теперь я масштабирую div с помощью этого кода: 

$(function() {
    $('#iframe_container').css({
        '-webkit-transform': 'scale(0.7)',
        '-webkit-transform-origin': '0 0 '
    });
});​

На iOS / Safari iframe обрезается (то есть не виден целиком), в то время как на настольном компьютере / Chrome iframe - это , а не .

Вот страница jsfiddle с кодом: http://jsfiddle.net/viebel/tJQUH/

Просто для пояснения: вот демонстрационная страница, которая демонстрирует реальную проблему - при открытии на iPad / iPhone Safari - все три строки должны быть одинакового размера: http://jsfiddle.net/viebel/tJQUH/show

Пожалуйста, посоветуйте, что я могу сделать, чтобы iframe на Mobile Safari был полностью обрезан?

Ответы [ 4 ]

4 голосов
/ 07 марта 2012

Я сделал несколько изменений. Особенно сделайте размер кадра как 100%. Затем попробуйте масштабировать сам iframe. Проверьте это 

            <!DOCTYPE html>
            <html>
            <head>
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
              <title> - jsFiddle demo by viebel</title>

              <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

              <link rel="stylesheet" type="text/css" href="/css/normalize.css">
              <link rel="stylesheet" type="text/css" href="/css/result-light.css">

              <style type='text/css'>

              </style>
              <script>
              $(document).ready(function()
              {
                //alert('hai');
                $('#ifd').css({
                    '-webkit-transform': 'scale(1.1)',
                    '-webkit-transform-origin': '0 0',
                    'width': '100%',
                    'height': '100%'
                });
              });

              </script>
            </head>
            <body>
                <div id="iframe_container" style="width:500px;height:400px;border:1px solid black;">
                    <iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" />
                </div>
            </body>

            </html>

Ссылка на jsfiddle: http://jsfiddle.net/viebel/tJQUH/13

0 голосов
/ 07 марта 2012

используйте jQuery's $(window).height() для масштабирования фрейма, а также рассчитайте размеры фрейма при изменении ориентации.

0 голосов
/ 06 марта 2012

Вы масштабируете внешний div, а не iframe, попробуйте масштабировать iframe, и он может сработать.

И так как вы указали, что iframe должен быть 300px, было бы проще просто установить высоту и ширину iframe равными 210px, так как это 70 процентов от 300.

0 голосов
/ 28 февраля 2012

Что-то не так происходит и в Safari Mac.

В качестве теста я бы попытался перезагрузить iframe после изменения CSS iframe_container 

var iframe = $('#iframe_container iframe');
iframe.attr('src', iframe.attr('src'));

Дай мне знать, если будет лучше!

...