have window.visualViewport.segments match the matchMedia API

[Kilian]

Originally posted in the now abandoned(?) repository on window segments: https://github.com/webscreens/window-segments/issues/14

window.visualViewport.segments doesn't return a live value back, so the current solution for that is wrapping it in a window.onresize event to get live feedback.

The window.matchMedia api however can attach a listener directly:

const match = window.matchMedia('(min-width: 400px)');

match.addListener((e) => {
  if (e.matches) {
    /* do a thing */
  } else {
    /* do another thing */
  }
});

I would propose the window.visualViewport.segments should match the matchMedia api in this regard and similarly let users add an event listener with addListener. This will simplify code and it will make the APIs more consistent:

const segments = window.visualViewport.segments;

segments.addListener((newSegments) => {
  if (newSegments) {
    /* do a thing */
  } else {
   /* segments is now null, do anothing thing */
  }
});