JavaScript在setInterval调用的函数中使用screen.width或screen.availWidth

Question

预期行为：

1. setInterval每2秒调用一次getScreenWidth()
2. getScreenWidth()获取(浏览器(屏幕的当前宽度
3. 宽度已记录到控制台中
4. 我们通过单击"最小化"旁边的"向下还原"按钮，然后使用鼠标指针更改屏幕宽度
5. 我们在控制台输出中看到了更新

输出：

"1536"

输出始终是一个常数值。(在我的案例中是1536(

我在CodePen上尝试了这个代码，我已经尝试过：

1. 调整输出窗口的大小。(更改其宽度(
2. 调整浏览器大小。(改变宽度和均匀高度(

HTML:

<div id="demo"></div>

脚本：

"use strict";
console.clear();
function getScreenWidth() {
return screen.availWidth;
// I've also tried screen.width
}
const demo = document.getElementById("demo");
let count = 0;
const intervalId = setInterval(function () {
demo.innerHTML = getScreenWidth();
console.clear();
console.log(demo.innerHTML);
console.log(count);
count++;
if (count > 30) {
clearInterval(intervalId);
}
}, 2000);

既然setInterval每2秒间接调用getScreenWidth()，那么screen.width不应该每次都是新值吗？

如果我假设它是一个新值，那么这是否意味着screen.width不等于浏览器窗口的当前宽度？

注意：代码中的count变量只是为了阻止setInterval在后台无限期运行。

Answer 1

我有相同的屏幕宽度：(

无论如何，您不需要setInterval，您可以在每次调整浏览器大小时使用窗口onresize事件进行更改：

window.onresize = function() {
screen.width; // 1536 / 1530 etc.
};

您也无法获得浏览器宽度(使用screen.width(

但使用jQuery的.width()函数可以很容易地获得它：

$(window).width();

下面是一个工作示例(使用jQuery(：

"use strict";
console.clear();
function getScreenWidth() {
return $(window).width();
}
const demo = document.getElementById("demo");
window.onresize = function() {
demo.textContent = getScreenWidth();
console.clear();
console.log(demo.textContent);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>

编辑：您也不能使用JavaScript调整浏览器窗口的大小。这将是一个巨大的安全问题，你应该庆幸这是不可能的。

Answer 2

来自MDN:

Screen界面表示一个屏幕，通常是当前窗口正在其上渲染的屏幕，并且是使用window.Screen获得的。

因此，此处的屏幕对象表示设备输出显示，而不是浏览器窗口。

同样，来自MDN:

Screen.width只读属性返回以像素为单位的屏幕宽度。

因此，screen.width(或window.screen.width(没有给我们浏览器窗口宽度，而是屏幕(设备输出屏幕(宽度，这显然不会改变。

要获得浏览器窗口的宽度，我们需要使用Element.clientWidth。

再次从MDN：

对于内联元素和没有CSS的元素，Element.clientWidth属性为零；否则，它是以像素为单位的元素的内部宽度。它包括填充，但不包括边框、边距和垂直滚动条(如果存在(。

当在根元素(元素(上使用clientWidth时，(或打开(如果文档处于怪癖模式(，视口的宽度(不包括任何滚动条(。

只需更改getScreenWidth()即可：

function getScreenWidth() {
return document.body.clientWidth;
}

现在，当浏览器窗口的宽度发生变化时，控制台输出也会发生变化。