Dec 15 2012

Detecting Actual Window Size in IE When Using CSS3 Zoom Property

Other Questions 0

I am facing a weird issue here. I know IE behaves rather differently from other browsers while calculating windows’s height and width, but I am quite stunned with what I found out. Here’s the code..

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

The code is pretty straightforward. What I am doing is every alternate second I am zooming the body using CSS3′s zoom property and calculating windows height and width. Its just the body that zooms in and zooms out while window’s dimensions remains the same.

Now when I test this script in Firefox I get uniform window dimensions every time the page is zoomed in or out (ideal case). However in IE thats not the case. It oscillates back and forth from (1004 X 358) to (6807 X 2500), with absolutely no window resize. I got the same readings when I used clientWidth & clientHeight.

I have also attached console log screenshot of IE 9. I want to know whether if there’s any way I could get actual window dimensions while using Zoom property. Any suggestions are welcome.

newest questions tagged html – Stack Overflow