如何防止iframe在缩放时重新调整大小 [英] How to prevent an iframe from re-sizing when 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'）。 $ b //$('iframe').css('-webkit-transform'，'scale（1）'）; 
 
 
 
}）; 
  

HTML

 < iframe id =mobile-iframesrc =https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696- hp.jpgwidth =534height =210frameborder =0>< / iframe> 
  

解决方案

JS解决方案：

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

示例：缩放级别为1（标准）：width：100px; height：50px;
缩放级别为2：width：50px; height：25px; - >浏览器显示它的大小加倍，所以它保持不变

刚添加：我仍然不建议这样做由于可用性;）

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>

解决方案

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 ;)

这篇关于如何防止iframe在缩放时重新调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！