我读过类似的问题,但似乎没有人有答案。我有一个正在加载图像的 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 解决:
看看这个How to detect page zoom level in all modern browsers?例如,检测浏览器缩放级别,然后将 iframe 的宽度和高度乘以相反的值,这样最终它们在视觉上保持不变。
示例:缩放级别为 1(标准):宽度:100px;高度:50px; 缩放级别为 2:宽度:50px;高度:25px; -> 浏览器显示它的两倍大小,所以它保持不变
刚刚补充:由于可用性,我仍然不建议这样做;)
关于javascript - 如何防止 iframe 在缩放时重新调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20339131/