lax.js icon indicating copy to clipboard operation
lax.js copied to clipboard

Use correct API for determining screen dimensions

Open RogerPodacter opened this issue 4 years ago • 0 comments

visualViewport is widely supported and I believe it is the preferred method for determining logical screenHeight. clientWidth and clientHeight do not I believe take zoom into account and also clientHeight is on iOS devices just the height of the page (so it never changes)

Separately, I believe the window.onresize API is also insufficient for our purposes as this event is not guaranteed to fire at 60fps whenever visualViewport changes. My solution is to listen for changes directly: (I am only concerned about height changes for my purposes):

var set_height = function() {
  var current_height = window.visualViewport.height
  var lax_height = lax.windowHeight
  
  if (current_height != lax_height) {
    lax.onWindowResize()
  }
  
  requestAnimationFrame(set_height)
}

requestAnimationFrame(set_height)

Curious for your thoughts!

RogerPodacter avatar Oct 21 '21 10:10 RogerPodacter