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 回答