Адаптивные события Javascript - PullRequest
Новая
       6

Адаптивные события Javascript

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

У меня есть некоторые сомнения относительно «лучшего» текущего метода, позволяющего различать функции Javascript на экранах определенного размера, потому что все ответы говорят о чем-то различном, и они мало что убеждают.Насколько я понимаю, методы для создания "отзывчивых функций Javascript":

matchMedia () function 

if (window.matchMedia('(max-width: 500px)').matches) {

width () функция применяется к окну 

if ($(window).width() < 500) {

И еще один метод, который я здесь не видел, это: 

if ($(".sampleClass").css("float") == "none") {

, который в основном проверяет любые CSS-свойства, которые меняются в медиа-запросе CSS:

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
    .sampleClass {float:none;}
}

Какой сейчас «лучший» метод для написания функций jQuery на экранах определенного размера?

1 Ответ

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

Я полагаю, что описанные выше варианты являются основными способами достижения этой цели.Насколько я могу выбрать:

Использование window.width, насколько я знаю, является наиболее распространенным способом получения условного кода области просмотра.Однако это имеет некоторые недостатки, так как не всегда одинаково для разных браузеров.Тем не менее, он обычно выполняет свою работу.

Matchmedia - более последовательный вариант, вам не нужно беспокоиться о поддержке старых браузеров, поэтому обязательно проверьте поддержку этой функции: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Последний метод сравнения классов на основе медиа-запроса CSS также будет более последовательным, и вам не нужно беспокоиться о поддержке браузера.Однако это немного длиннее, поэтому вам нужно принять это во внимание.

В целом, все это будет работать.Есть только некоторые незначительные различия, которые следует учитывать.

...