Geek Answers Handbook

Iframe cut when in div on mobile safari

I would like a scale iframe on mobile safari .

I include 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 scale the div with this code:

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

In iOS / Safari, the iframe cut (i.e. cannot be fully visible), and on the desktop / chrome, the iframe not cut.

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

Just to clarify: here is a demo page demonstrating the real problem - when it is open on iPad / iPhone Safari - all three lines should be the same size: http://jsfiddle.net/viebel/tJQUH/show

Please consult, what can I do to show iframe in Mobile Safari completely uncut?

+8
javascript css html5 ios mobile-safari
source share
4 answers

I made a few changes. Especially the frame size is 100%. Then try to scale the iframe itself. check this

  <!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 link: http://jsfiddle.net/viebel/tJQUH/13

+4
source share

Something is wrong there on Safari Mac.

As a test, I tried reloading the iframe after changing the iframe_container CSS

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

Let me know if it will be better!

0
source share

You are scaling the outer div, not the iframe, try scaling the iframe and it can work.

And since you indicated that the iframe should be 300px, it would be easier to just set the height and width of the iframe to 210px, as this is 70 percent of 300.

0
source share

use jQuery $(window).height() to scale the iframe, and also to calculate iframe sizes when changing orientation.

0
source share

More articles:


All Articles