Question

我在这里遇到一个奇怪的问题。我知道IE在计算窗口的高度和宽度时与其他浏览器的行为有很大的不同，但我对我发现的内容感到震惊。这是代码..

var i = 1; 
setInterval(function() {
    if (i % 2 == 0)
        $("body").css("zoom","0.15");
    else
        $("body").css("zoom","1");
    i++;
    console.log(i+" ("+$(window).width()+" X "+$(window).height()+")");                
},1000 );

代码非常简单。我正在做的是每隔一秒我使用CSS3's zoom属性缩放身体并计算窗口高度和宽度。它只是放大和缩小的主体，而窗口的尺寸保持不变。

现在，当我在Firefox中测试此脚本时，每次页面放大或缩小时都会获得统一的窗口尺寸（理想情况）。但是在IE中并非如此。它从（1004 X 358）到（6807 X 2500）来回摆动，完全没有窗口调整大小。当我使用clientWidth＆amp;时，我得到相同的读数clientHeight。

我还附上了IE 9的控制台日志截图。我想知道在使用zoom属性时是否有任何方法可以获得实际的窗口尺寸。欢迎任何建议。

我使用以下doctype

＆LT; ！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.0 Transitional // EN”＆gt;

有趣的是，当我使用＆lt; ！DOCTYPE HTML＆gt; ，但缩放不起作用。有什么方法可以得到正确的尺寸和工作变焦吗？

enter image description here

Answer 1

zoom不是CSS3属性，而是纯粹的MS发明，它很老，也意味着他们可以做任何他们想做的事。

当您使用<!DOCTYPE HTML>触发Standardsmode时，在较新的IE中，您需要使用-ms-zoom而不是zoom。

假设你的测试是正确的，我建议不要试图解决IE的错误行为是看大局，但为此我需要知道：为什么你需要知道有多大窗口是？你为什么使用zoom？真正的CSS3属性transform怎么样？

使用CSS3缩放属性时在IE中检测实际窗口大小

1 个答案: