浏览器窗口大小的设备像素

目标：我想闪光灯有关于浏览器窗口的设备像素宽度和高度intializing时，调整，或在浏览器缩放事件的准确信息。我需要将Flash嵌入到运行在Chrome浏览器，Safari浏览器，Firefox中的HTML页面中，也就是说， swf必须填充整个浏览器视口。我不想让闪光灯变焦。在闪光灯内部，我可以设置StageScaleMode.NOSCALE，以便闪光灯呈现为Device Pixels。我还将状态的对齐方式设置为StageAlign.TOP_LEFT。现在我需要的是浏览器中的设备像素数量！浏览器窗口大小的设备像素

问题：当浏览器缩放或我在浏览器缩放时打开网站时，无法轻松获取设备像素中浏览器尺寸的信息。

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

什么不起作用：

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

解决方案：

参见下面选择的答案。反馈欢迎。

来源

2011-02-17 jedierikb

你只是想改变字体大小吗？或者改变一切的大小？ – 2011-02-18 17:21:33

首先只有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和歌剧的解决方案：

<!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); 
} 

} 
}

最后，我相信这是对Opera using screen.width and screen.height更优化的解决方案，但我没有测试它。

来源

2011-02-23 17:44:16 jedierikb

浏览器窗口大小的设备像素

回答

相关问题