How do I get the browser zoom factor to work?
I'm trying to determine if a user has changed on their web page and it looks like there are several properties available to help determine if one is a stage. browserZoomFactor . Nothing I've tried change 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 also set browser scaling and scaling in the HTML wrapper page. And neither option seems to do anything. It is assumed that browser zoom will be enabled by default.
If I manually get the width of the client of the swf object, I can compare it to the width of the scene and get the scale factor, but doesn't work in Firefox (on Mac), it works in Safari (on Mac).
UPDATE:
Here are screenshots of what I see in Safari and Firefox on Mac:
Safari (value of the clientWidth variable when zooming) 
Firefox (no values โโfound that zoom) 
source to share
Are you trying to get the swf size after the user ctrl + MouseWheeled in the html page? I don't think clientWidth will change if you scale the whole page. Have you tried window.devicePixelRatio ?
I also wrestled with page sizing and it only seems to have a property that changes when the page is scaled
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 can get scrollWidth / Height instead of clientWidth / Height
Update - works in my Firefox:
source to share