1

I've read similar issues on this but no one seems to have an answer. I have an iframe where I am loading an image. When I zoom the iframe becomes bigger or smaller. Is there a way to prevent the iframe from zoooming or a way to keep the ratio when zooming?

I got it working for an image but can seem to get it to work for when I use an iframe

JS

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



$(window).resize(function(){

    var device = detectZoom.device();

    newWidth = iwidth / device;
    newHeight = iheight / device;


    $(iframeDimensions).attr('width', newWidth);
    $(iframeDimensions).attr('height', newHeight);

    var winW = document.body.offsetWidth;


    console.log('zoom level: '+device);
    console.log('new width: '+newWidth+'px');
    console.log('new height: '+newHeight+'px');
    console.log('offsetWidth '+winW);
    console.log('scale '+ winW / newWidth);




    //$('iframe').css('-webkit-transform', 'scale(' + (device + ", " + device) + ')')
    $('iframe').width();
   //$('iframe').css('-webkit-transform', 'scale(1)');



});

HTML

<iframe id="mobile-iframe" src="https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696-hp.jpg" width="534" height="210" frameborder="0"></iframe>
elodev
  • 243
  • 8
  • 21
  • What is zooming exactly? The entire page? If so, wouldn't the expected behavior be to zoom the iframe, too? I believe the short answer here is, no, there's no way to do what you want (not without javascript). – matthewpavkov Dec 02 '13 at 22:41
  • What do you mean by zooming. The build-in browser zoom? This is made for resizing things so no, you probably wouldn't want to keep it the same size and even if you could it wouldn't be very usable. But it should keep the ratio as it just makes a resize of the rendered view. So maybe add a fiddle and a more precise description of what your problem is? – Ria Weyprecht Dec 02 '13 at 22:42
  • When a user zooms in their browser I want to prevent the normal behavior for iframes. This is for showing image ads in an iframe. @matthewpavkov How would I go about doing this in js – elodev Dec 02 '13 at 22:47
  • Yes the build in browser zoom. I want to prevent the zoom for iframes. The ifreames will have an image @RiaElliger – elodev Dec 02 '13 at 22:49

1 Answers1

1

Solution with JS:

take a look at this How to detect page zoom level in all modern browsers? for example to detect the browser zoom level and then multiply the width and height of your iframe with the inverse value so in the end they visually stay the same.

Example: zoom level is 1 (Standard): width: 100px; height: 50px; zoom level is 2: width: 50px; height: 25px; -> Browser shows it double the size so it stays the same

just added: I still wouldn't recommend doing it due to usability ;)

Community
  • 1
  • 1
Ria Weyprecht
  • 1,275
  • 9
  • 19
  • I am going to attempt this I will keep you posted... @RiaElliger – elodev Dec 02 '13 at 23:15
  • So I got this working but only for images. For an I frame the width and height do change but the iframe get zoomed in... I updated my code above @RiaElliger – elodev Dec 03 '13 at 21:33
  • sure, the content inside the iframe is zoomed if that is what you mean. But if you have just an image in your iframe you can load a site instead of the image itself and then make it use 100% of the width using css – Ria Weyprecht Dec 03 '13 at 23:35