0

I am trying to keep the size of an iframe the same no matter how much a user zooms in their browser. I have it working for an image by adjusting the width according to the zoom level. But can't seem to get it to work with an iframe. The only way to really re-size the iframe is by using transform scale. I am using this plugin to calculate the zoom https://github.com/tombigel/detect-zoom

javascript

/*get the value of the image width and height*/

var iframeDimensions = document.getElementById('mobile-iframe');
var iwidth = iframeDimensions.clientWidth;

$(window).resize(function() {
    var device = detectZoom.device();
    console.log(device);
    newWidth = iwidth / device;
    console.log(newWidth+'px');
    $(iframeDimensions).attr('width', newWidth);
    //I would get the iframe to resize  useing this line of code but what is the best way of using this with scale ? 
    $('iframe').css('-webkit-transform', 'scale(' + (document.body.offsetWidth / newWidth) + ')');
});

HTML

<iframe id="mobile-iframe" src="https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696-hp.jpg" width="534" height="205"  frameborder="0"  ></iframe>  
<img id="mobile-iframe" src="https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696-hp.jpg" width="534" alt=""/>
D. Schreier
  • 1,462
  • 1
  • 17
  • 29
elodev
  • 243
  • 8
  • 21
  • Possible duplicate of http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – LuFaMa Dec 03 '13 at 18:42
  • I read the thread and I was able to solve part of my problem. But the problem I am having now is a little different since calculating the zoom level is not my issue. @LuFaMa – elodev Dec 03 '13 at 18:47

0 Answers0