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

How to prevent an iframe from re-sizing when zooming

本文关键字：调整 新调整 iframe 何防止 缩放      更新时间：2024-02-21

我读过类似的问题，但似乎没有人知道答案。我有一个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>

JS解决方案：

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

示例：缩放级别为1（标准）：宽度：100px；高度：50px；缩放级别为2:width:50px；高度：25px；->浏览器显示它的大小是原来的两倍，所以它保持相同的

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

相关文章：