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

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

0 голосов
/ 16 февраля 2019

tl; dr

  • некоторые библиотеки 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)

}
...