在设备像素浏览器窗口大小 [英] browser viewport size in device pixels
问题描述
目标：我要闪到有关于浏览器的视口的设备像素的宽度和高度准确的信息intializing时，调整大小，或者在浏览器缩放事件的。
具体细节：我需要嵌入闪存成运行在Chrome浏览器，Safari浏览器，火狐，即一个HTML页面。该SWF必须填满整个浏览器窗口。我不想闪光灯放大。里面的闪光我可以设置<一个href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#scaleMode"相对=nofollow> StageScaleMode.NOSCALE 使闪光呈现给的设备像素。我还设置了国家的对齐方式为StageAlign.TOP_LEFT。现在，我需要的是设备的像素在浏览器中的数字！
Specifics: I need to embed flash into an html page that runs in chrome, safari, firefox, ie. The swf must fill the entire browser viewport. I don't want the flash to zoom. Inside of flash I can set StageScaleMode.NOSCALE so that flash renders to Device Pixels. I also set the state's alignment to StageAlign.TOP_LEFT. Now all I need is the number of device pixels in the browser!
问题：当有浏览器缩放或我打开该网站，而浏览器被放大，我不能轻易得到设备的像素上的浏览器的尺寸信息
Problem: when there is a browser zoom or I open the site while the browser is zoomed, I cannot easily get information on the browser's dimensions in device pixels.
解决方案： acrobat.com的在线文档编辑器（前身为时髦词）处理这个问题就好了（免费带一个帐号玩）。他们在做什么？在WebKit的浏览器，所以能保持document.width报告每次设备像素。我不知道他们在做的Firefox和IE的东西。
Solution: acrobat.com's online document editor (formerly known as buzzword) handles this problem just fine (free to play with with an account). What are they doing? In webkit browsers, they are able to keep the document.width to report device pixels every time. I am not sure what they are doing in firefox and ie.
有什么不工作：
- Swffit does not support this.
- Just loading the swf into the browser is not a solution, as the swf needs to be embedded.
- This solution scales a swf to accomodate different browser zooms but does not get information on the browser window dimensions.
解决方案：
请参阅下面的选择答案。反馈的欢迎。
See selected answer below. Feedback welcome.
推荐答案
首先对WebKit的浏览器的解决方案不仅因为它依赖于 document.width 和 document.height 。
First a solution for webkit browsers only since it relies on document.width and 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和歌剧的解决方案：
And here is a solution for IE, Mozilla, and 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 );
}
}
}
最后，我相信这是对歌剧使用screen.width和screen.height更优化的解决方案，但我没有测试它。
Finally, I believe there is a more optimal solution for Opera using screen.width and screen.height, but I've not tested it.
这篇关于在设备像素浏览器窗口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
