Home/ Questions/Q 7605249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:07:12+00:00

I would like to scale an iframe on mobile safari . I am including

  • 0

I would like to scale an iframe on mobile safari.

I am including an iframe inside a div.

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

Now I am scaling the div with this code:

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

On iOS/Safari, the iframe is cut (i.e. can’t be entirely seen) while on desktop/chrome, the iframe is not cut.

Here is a jsfiddle page with the code: http://jsfiddle.net/viebel/tJQUH/

Just to clarify: here is a demo page that demonstrates the real problem – when opened on iPad/iPhone Safari – all the three lines should be of the same size: http://jsfiddle.net/viebel/tJQUH/show

Please advice what can I do to see the iframe on Mobile Safari completely uncut?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have made few changes.Especially make the frame-size as 100%. Then try to scale the iframe itself.Check this out

                <!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>

    Link to jsfiddle:
    http://jsfiddle.net/viebel/tJQUH/13

    • 0