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=""/>