EonerCMS-CMS (13) for a desktop-like system)

Determine whether the browser is scaled

This is a problem that has plagued me for a week, but now I have finally solved it with the assistance of @ Mr. L. Let's first describe the problem. When you browse the QQ space, use a browser or press ctrl + scroll wheel to zoom in and out the page. A friendly prompt is displayed on the page, such:

At first, I thought it was by judging the window width and height, but I found that the scaled width and the original width and height are the same. Failed.

How to detect page zoom level in all modern browsers?, If the height is fixed, the obtained height remains unchanged after zooming. Therefore, the height must be self-adaptive, so that the obtained height is the actual height. The subsequent operations are simple. After domReady, record the current height. When zooming, compare the current height and initial height in the window resize event to determine whether the browser is scaled down or enlarged. However, after the test, we found that this method has a small defect, that is, when the scaling ratio is small, the actual height is not accurate, and it is easy to see that I am obviously scaling, however, the height increases. Failed.

Then, I continue to analyze whether it can be determined by font-size. The operation process is similar to the one above. First, record, zoom, and compare. chrome passes the test and ie does not pass the test, ff test fails. Failed.

Finally, I did not solve the problem. I plan to check the source code of the QQ space. Fortunately, js is not encrypted. After the source code is written, the original code is determined by a zoom.swf file. js is just an operation.

Zoom.swf is being referenced to the page first.

<object data="zoom.swf?onchange=onZoomChange" width="10" height="10" id="zoom" name="zoom_detect" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"><param name="scale" value="noScale"></object>

The js Code is as follows:

Var level = 1; var onZoomChange = function (o) {var s = o. scale, m = s> 1? 'Zoom in ': 'zoom out'; if (s! = 1) {level = s; $ ('P'). append (m);} else {if (s! = Level) limit ('p'0000.html ("");}}}

Onzoomchange has an o.scale. this scaletoken is returned through zoom.swf. You can determine whether this value is greater than 1 to see whether it is enlarged or reduced.

Run the demo to make the whole world clean.

Download demo (chrome cannot be tested locally and must be placed on the server ):

Online Test address: http://hoorayos.com/demo/