0

你好,代码人:)

我是一名前端 Web 开发人员,因此需要不断了解实际视口大小,以便了解响应式设计断点的开始和结束位置。我知道 FF 自己的“测试窗口大小”功能,但遇到了一个非常方便的扩展:FireSizer。该扩展有一个小缺点:它返回窗口大小,包括 FF 的边框和滚动条。我需要视口大小。所以我需要破解扩展,但不知道足够的javascript来这样做。也许有人愿意在这里帮助他们?

我希望扩展程序能够实际查找滚动条,并从宽度中减去 a)如果不存在滚动条,则为 14;如果存在滚动条,则为 30

我发现了我认为更改代码的正确位置:

//
// Update the status bar panel with the current window size
//
function FiresizerUpdateStatus() {
    var width  = window.outerWidth  + ''; // <- Think code needs to be edited here
    var height = window.outerHeight + '';
    document.getElementById("firesizer-statuspanel").label = width + 'x' + height;
}

感谢您的任何努力!AO

@Chen Asraf:非常感谢。我不知道有一个元素可以调用文档宽度。我将代码更改为以下代码,这就是诀窍(与 FF 自己的“响应式设计视图模式”相比,它是正确的,它关闭了 2px - 我从 clientWidth 中减去。)

function FiresizerUpdateStatus() {
var width  = window.outerWidth  + ''; // changed this line to:
var width  = document.documentElement.clientWidth-2 + '';
var height = window.outerHeight + '';
document.getElementById("firesizer-statuspanel").label = width + 'M' + height;
}

谢谢 AO

4

1 回答 1

0

使用 JavaScript 获取浏览器视口尺寸的可能重复项

似乎您可以使用以下方法获取窗口的内部尺寸:

// My window is maximized; screen is 1366x768

alert(document.documentElement.clientWidth);
// ^ returns 1349 (17 missing pixels because of scrollbar)

alert(document.documentElement.clientHeight);
// ^ returns 643 (125 pixels missing because of start bar & Chrome toolbars)

然后,您可以将以下内容与您需要的任何其他内容进行比较(例如,将客户端宽度与窗口宽度进行比较,以确定差异是否大到足以成为滚动条 - 只需尝试大小)

于 2013-08-25T13:19:07.297 回答