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

时间:2013-12-02 22:25:00

标签: javascript html css iframe zooming

我已经阅读过类似的问题,但似乎没有人有答案。我有一个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>

1 个答案:

答案 0 :(得分:1)

JS解决方案:

看一下这个How to detect page zoom level in all modern browsers?例如检测浏览器缩放级别,然后将iframe的宽度和高度乘以反值,最后它们在视觉上保持不变。

示例:缩放级别为1(标准):宽度:100px;身高:50px; 缩放级别为2:宽度:50px;身高:25px; - &GT;浏览器显示它的大小加倍,所以它保持不变

刚补充说:由于可用性,我仍然不建议这样做;)