Question

Hello代码人员：）

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

我希望实际寻找滚动条的扩展名，并从宽度中减去 a）14如果没有滚动条或 b）如果滚动条存在，则为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

Answer 1

Get the browser viewport dimensions with 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)

然后，您可以将以下内容与您需要的任何内容进行比较（例如，将客户端宽度与窗口宽度进行比较，以查找差异是否足以成为滚动条 - 只需测试大小）

修改FireFox扩展：如果（滚动条存在）var - 30 else var -14

1 个答案: