JavaScript，跟踪窗口屏幕宽度答案

【问题标题】：JavaScript, track window screen widthJavaScript，跟踪窗口屏幕宽度
【发布时间】：2023-02-17 23:23:34
【问题描述】：

我有一个函数可以告诉用户屏幕的当前宽度是多少但是当我将窗口调整到小于 1024 的宽度时，该函数不会输出小于 1024 的宽度

  function xxx(){
    var x = window.screen.Width
    console.log(x)
    }
    setInterval(xxx, 1000)

输出：

即使屏幕宽度小于 1024 我如何在不使用@media 请求的情况下解决这个问题？

已经尝试过：

window.screen.innerwidth

【问题讨论】：

很难粘贴您使用的确切实际代码吗？仅仅5行就有这么多错误
屏幕宽度 !== 窗口宽度。 this question 的答案基本上涵盖了检索屏幕/窗口大小的所有不同方法。

标签： javascript html

【解决方案1】：

就像@yousoumar 所说的那样，不是使用setInterval 来获取用户的屏幕宽度，而是在屏幕分辨率发生变化时使用resize 事件来获取屏幕宽度。

window.screen.width只获取用户的屏幕宽度，不会根据浏览器的手动调整大小而改变

相反，window.innerWidth 获取浏览器宽度，它会根据浏览器的手动调整大小而变化
function widthResizer(){
  var width = window.innerWidth
  console.log(width)
}

// Getting the width of the browser on load
widthResizer()

// Getting the width of the browser whenever the screen resolution changes.
window.addEventListener('resize', widthResizer)

【讨论】：

【解决方案2】：

不要设置 setIntervall 来跟踪屏幕宽度变化，而是使用内置的 resize 事件。

正如@Kumara 指出的那样，你会想要使用window.innerWidth，而不是window.screen.width，因为最后一个给出屏幕的原始尺寸，而不是调整后的尺寸。
function xxx(){
  var x = window.innerWidth
  console.log(x)
}

// that gives you the width on load
xxx(); 

// that is for when you change the width manually
window.addEventListener('resize', xxx);

【讨论】：