How to get browser zoom factor to work?

Question

I'm trying to determine if a user has zoomed in on their web page and it looks like there are a few properties that are available to help determine this one of them being the stage.browserZoomFactor. Nothing I've tried is changing the value. It is always 1.

Here is the code I'm using:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"

               minWidth="955" minHeight="600" 
               applicationComplete="application1_applicationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function getZoomInfo():void {
                var clientWidth:int;
                var scaleFactor:Number

                if (ExternalInterface.available) {
                    ExternalInterface.marshallExceptions = true;
                    clientWidth = ExternalInterface.call(string, ExternalInterface.objectID);
                    scaleFactor = Number(Number(stage.stageWidth/clientWidth).toFixed(1));
                }

                zoomFactorLabel.text = "";
                zoomFactorLabel.text += "Client width: "+clientWidth + "\n";
                zoomFactorLabel.text += "Stage width: "+stage.stageWidth + "\n";
                zoomFactorLabel.text += "Calculated Scale factor: "+scaleFactor + "\n";
                zoomFactorLabel.text += "Browser Zoom factor: "+stage.browserZoomFactor + "\n";
                zoomFactorLabel.text += "Content Scale Factor: "+stage.contentsScaleFactor + "\n";
                zoomFactorLabel.text += "DPI: "+applicationDPI;
            }

            protected function application1_applicationCompleteHandler(event:FlexEvent):void {
                stage.addEventListener(Event.BROWSER_ZOOM_CHANGE, browserZoomChange);
                getZoomInfo();
            }

            protected function browserZoomChange(event:Event):void {
                trace("Zoom changed");
                zoomFactorLabel.text = "Zoom changed";
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:String id="string"><![CDATA[
function(clientId) {
    var clientWidth = document.getElementById(clientId).clientWidth;
    return clientWidth;
}
        ]]></fx:String>
    </fx:Declarations>

    <s:TextArea id="zoomFactorLabel" horizontalCenter="0" verticalCenter="-60"/>
    <s:Button label="check browser zoom" click="getZoomInfo()" horizontalCenter="0" verticalCenter="30"/>

</s:Application>

I've also set the browserzoom to scale and noscale in the HTML wrapper page. And neither option seems to do anything. Browser zoom is supposed to be enabled by default.

If I manually get the swf object client width I can compare it to the stage width and get a scale factor but doesn't work in Firefox (on Mac) it does work on Safari (on Mac).

• Adobe Blog post on browser zoom factor.
• Release notes on Flash Player 21.

UPDATE:
Here are screenshots of what I'm seeing in Safari and Firefox on Mac:

Safari (clientWidth value changes on zoom)

Firefox (no values found that change on zoom)

Answer 1

Are you trying to get the size of the swf after user ctrl+MouseWheeled the html page? I don't think the clientWidth is going to change if you are zooming entire page. Did you try window.devicePixelRatio ?

I've also struggled with determining size of the page and that seem to be only property which changes when you zoom your page

function printDispSettings(){
    t = "";
    t += "wins: " + (w===window) + "\n";
    w = window;
    t += "Hello\n";
    t += "screen:       " + screen.width +      "   x   " + screen.height + "\n";
    t += "screen.avail: " + screen.availWidth + "   x   " + screen.availHeight + "\n";
    t += "screen.aTL:   " + screen.availTop +   "   x   " + screen.availLeft + "\n";
    t += "screen.TL:    " + screen.top +   "    x   " + screen.left + "\n";
    t += "pixDepth: " + screen.pixelDepth + "\n";
    t += "colDepth: " + screen.colorDepth + "\n";
    t += "pixRatio: " + window.devicePixelRatio + "\n";
    t += "win.Inner:    " + window.innerWidth + "   x   " + window.innerHeight + "\n";
    t += "win.Outer:    " + window.outerWidth + "   x   " + window.outerHeight +"\n";
    //t += "win.Inner:  " + window.innerWidth + "   x   " + window.innerHeight + "\n";
    t += "win.TopLeft:  " + window.scrollX + "  x   " + window.scrollY +"\n";
    t += "F " + c + "\n";
    t = repStr(t,10);
    //document.writeln("<pre>" + s + "</pre>");
    //p.innerHTML = s;
}

Also you may want to get scrollWidth/Height instead of clientWidth/Height

Update - works in my Firefox: