以设备像素为单位的浏览器视口大小答案

【问题标题】：browser viewport size in device pixels以设备像素为单位的浏览器视口大小
【发布时间】：2011-02-17 02:35:18
【问题描述】：

目标：我希望 Flash 在初始化、调整大小或浏览器缩放事件时获得有关浏览器视口宽度和高度的准确信息（以设备像素为单位）。

细节：我需要将flash嵌入到一个在chrome、safari、firefox中运行的html页面中，即。 swf 必须填满整个浏览器视口。我不希望闪光灯变焦。在 flash 内部，我可以设置 StageScaleMode.NOSCALE，以便 flash 渲染为 Device Pixels。我还将状态对齐设置为 StageAlign.TOP_LEFT。现在我只需要浏览器中的设备像素数！

问题：当浏览器缩放或我在浏览器缩放时打开网站时，我无法轻松获取有关浏览器尺寸（以设备像素为单位）的信息。

解决方案：acrobat.com's online document editor（以前称为流行语）很好地解决了这个问题（可以免费使用帐户）。他们在做什么？在 webkit 浏览器中，它们能够保持 document.width 每次都报告设备像素。我不确定他们在 Firefox 和 ie 中做了什么。

什么不起作用：

Swffit not 支持这个。
仅将 swf 加载到浏览器中不是解决方案，因为需要嵌入 swf。
This solution 缩放 swf 以适应不同的浏览器缩放，但无法获取有关浏览器窗口尺寸的信息。

解决方案：

请参阅下面的选定答案。欢迎反馈。

【问题讨论】：

您只是想更改字体大小吗？或者改变一切的大小？
他们的编辑器代码被混淆了吗？
@alxx：你指的是他们的swf？我不知道;不是我的强项。
@jedierikb：不，我是指他们的 html/js 助手。
好问题。 HTHjsfiddle.net/a4aTb。 IE7、FF 测试。

标签： javascript flash actionscript-3

【解决方案1】：

首先是针对 webkit 浏览器的解决方案，因为它依赖于 document.width 和 document.height。

这里是html：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>

function ic( )
{   
var params = {
allowscriptaccess: "always",
seamlesstabbing: "false",
menu: "false"
};
var flashvars = {
bzw: document.width,
bzh: document.height
};
swfobject.embedSWF( "bZoom.swf", "b",
"100%", "100%",
"10", null, flashvars, params, {} );
Event.observe( window, 'resize', rs.bindAsEventListener(this) );
}

function rs( )
{
getFlash("b").JS2AS_resize( document.width, document.height );
}

function getFlash( id )
{
if (navigator.appName.indexOf("Microsoft") != -1)
{   return window[id];
}
else
{   return document[id];
}
}

Event.observe( window, 'load', ic.bindAsEventListener(this) );
</script>
</head>
<body style="margin:0;padding:0;">
<div id="a" style="position:absolute;top:0;left:0;width:100%;height:100%;"><div id="b"></div></div>
</body>
</html>

这是as3：

package
{
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;

public class bZoom extends Sprite
{

private var _w:int;
private var _h:int;


public function bZoom( ):void
{
    var lobj:Object = LoaderInfo( this.root.loaderInfo ).parameters;
    _w = lobj["bzw"];
    _h = lobj["bzh"];
    ExternalInterface.addCallback( "JS2AS_resize", JS2AS_resize );


    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    painty( );
}

public function JS2AS_resize( pw:int, ph:int ):void
{   _w = pw;
    _h = ph;
    painty( );
}

public function painty( ):void
{
    graphics.clear();
    graphics.beginFill( 0xFFFFFF );
    graphics.drawRect( 0, 0, _w, _h );
    graphics.beginFill( 0xFF0000 );
    graphics.drawRect( 0, 0, _w-5, _h-5 );
}

}
}

这里有一个适用于 IE、Mozilla 和 Opera 的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="overflow-y:hidden;overflow-x:hidden;">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>

function ic( )
{   
var params = {
allowscriptaccess: "always",
seamlesstabbing: "false",
menu: "false"
};
var dv = document.viewport;
swfobject.embedSWF( "bZoom.swf", "b",
dv.getWidth()+"px", dv.getHeight()+"px",
"10", null, flashvars, params, {} );
Event.observe( window, 'resize', rs.bindAsEventListener(this) );
}

function rs( )
{
var dv = document.viewport;
var dvw = dv.getWidth();
var dvh = dv.getHeight();
$("b").width = dvw+"px";
$("b").height = dvh+"px";
//for reasons unknown (...timing?) we ask for these again
var dvw = dv.getWidth();
var dvh = dv.getHeight();
getFlash("b").JS2AS_resize( );
}

function getFlash( id )
{
if (navigator.appName.indexOf("Microsoft") != -1)
{   return window[id];
}
else
{   return document[id];
}
}

Event.observe( window, 'load', ic.bindAsEventListener(this) );
</script>
</head>
<body style="margin:0;padding:0;background-color:#00FF00;">
<div id="a" style="position:absolute;top:0;left:0;"><div id="b"></div></div>
</body>
</html>

和as3：

package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;

public class bZoom extends Sprite
{


public function bZoom( ):void
{

    ExternalInterface.addCallback( "JS2AS_resize", JS2AS_resize );

    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    painty( );
}


public function JS2AS_resize( ):void
{   painty( );
}

public function painty( ):void
{
    graphics.clear();
    graphics.beginFill( 0xFFFFFF );
    graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
    graphics.beginFill( 0xFF0000 );
    graphics.drawRect( 0, 0, stage.stageWidth-5, stage.stageHeight-5 );
}

}
}

最后，我相信Operausing screen.width and screen.height有一个更优化的解决方案，但我没有测试过。

【讨论】：