window.innerWidth - обойти, когда он возвращает неправильное значение

Question

ТЛ; др

• некоторые библиотеки javascripts используют окно innerWidth | Высота, чтобы сделать свои расчеты;
• window.innerWidth не на 100% надежен, что может привести к ошибкам;
• matchMedia(). match на 100% точен, но возвращает логическое значение;
• давайте посмотрим: используйте matchMedia для проверки значения window.innerWidth; если он возвращает false, используйте matchMedia, чтобы выполнить binarySearch, пока не найдете правильное значение;

Я столкнулся с этой проблемой с некоторыми библиотеками, которые опираются на window.innerWidth. В тех случаях, когда у меня было несколько медиа-запросов, возвращаемое значение window.innerWidth, используемое библиотекой, было бы отключено, и у этой библиотеки были бы проблемы с неправильным значением.

Я видел, что matchMedia(). Match всегда возвращает правильное значение, но возвращает логическое значение, а не значение ширины. До сих пор я не видел решения для этого (может быть, некоторые из вас знают лучшее решение?), Поэтому я нашел решение с использованием matchMedia.

Я создал функцию getCorrectDimension, которая выполняет двоичный поиск по окну innerWidth(или Height), чтобы найти правильное значение, если его значение неверно, как вы можете видеть ниже:

const binarySearch = dim => function bin(start, end) {
    const guess = Math.floor((start + end)/2)

    // this checks if we have the correct value, if not it will keep calling itself until there's a match
    if(window.matchMedia(`(${dim}: ${guess}px)`).matches) {
        return guess
    }

    // since it is not a match, then we need to recalibrate the range and call again.
    // for that we check the boolean value using with min-width (height) rule.
    return window.matchMedia(`(min-${dim}: ${guess}px)`).matches 
        ? bin(guess, end) 
        : bin(start, guess)
}

const getCorrectDimension = (dim = 'width', range = 300) => {
    if(dim !== 'width' && dim !== 'height') {
        throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
    }

    let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)

    // here checks if the window.innerWidth or Height it's the correct one
    if(window.matchMedia(`(${dim}: ${window[prop]}px)`).matches) {
        return window[prop]
    }

    // here, since the value is wrong we use binarySearch to find its correct value
    const start = window[prop] - range >= 0 ? window[prop] - range : 0
    const end = window[prop] + range

    return binarySearch(dim)(start, end)

}