Detecting Actual Window Size in IE When Using CSS3 Zoom Property
Question
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.
I am using the following doctype
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
Interestingly I get correct dimensions when I use < !DOCTYPE HTML> , but then the zoom doesn't work. Is there any way I could get the right dimensions and also the working zoom?
1 answers
solution1
0 2012-12-17 10:20:10
zoom isn't a CSS3 property, but a pure MS invention, which is quite old and also means that they can do what ever they want.
When you use <!DOCTYPE HTML> to trigger Standardsmode, then in newer IEs you need to use -ms-zoom instead of zoom .
Assuming your tests are correct, I'd suggest instead of trying to work around IE's buggy behavior is to look at the bigger picture, but for that I'd need to knpw: Why are do you need to know how large the window is? Why are you using zoom ? What about the real CSS3 property transform ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.