缩放时如何防止iframe调整大小

Question

我已经读过类似的文章，但是似乎没人能找到答案。 我有一个要加载图像的iframe。 缩放时，iframe会变大或变小。 有没有一种方法可以防止iframe发生缩放或在缩放时保持该比例？

我将其用于图像，但是当我使用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>

Answer 1

JS解决方案：

看看这个如何在所有现代浏览器中检测页面缩放级别？ 例如，检测浏览器的缩放级别，然后将iframe的宽度和高度乘以倒数值，以便最终它们在视觉上保持不变。

示例：缩放级别为1（标准）：宽度：100像素； 高度：50px； 缩放级别为2：宽度：50像素； 高度：25px； ->浏览器显示它的大小增加一倍，因此保持不变

刚刚补充：由于可用性，我仍然不建议这样做；）