html - JavaScript, track window screen width - Stack Overflow

admin管理员组

文章数量:1414886

I have a function that tells what the current width of the user's screen is but when i resize window to width less than 1024 that function doesnt output width less than 1024

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

output:

1024

even if screen width less than 1024 how can i fix this without using @media requests?

already tried:

window.screen.innerwidth

I have a function that tells what the current width of the user's screen is but when i resize window to width less than 1024 that function doesnt output width less than 1024

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

output:

1024

even if screen width less than 1024 how can i fix this without using @media requests?

already tried:

window.screen.innerwidth

• javascript
• html

Share Improve this question Follow edited Jun 3, 2022 at 21:04 bald asked May 27, 2022 at 7:50 baldbald 5611 silver badge55 bronze badges 2

• 2 it was so hard to paste the exact actual code you used? there are so many mistakes in just 5 lines – Diego D Commented May 27, 2022 at 7:53
• screen width !== window width. The answers to this question cover basically every different approach to retrieving screen/window sizes. – DBS Commented May 27, 2022 at 9:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Like @YoussoufOumar said instead of using setInterval to get the user's screen width, use resize event to get the screen width whenever the screen resolution changes.

window.screen.width get only the user's screen width and it doesn't change according to the manual resizing of the browser

Instead window.innerWidth gets the browser width and it changes according to the manual resizing of the browser

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)

Instead of setting up a setIntervall to track screen width changes, use the built in resize event.

As @Kumara pointed it, you would wanna use window.innerWidth, instead of window.screen.width, as the last one give the screen's original size, not the resized one.

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);

本文标签： htmlJavascripttrack window screen widthStack Overflow