瀏覽器窗口大小的設備像素

目標：我想閃光燈有關於瀏覽器窗口的設備像素寬度和高度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

瀏覽器窗口大小的設備像素

回答

相關問題