Проблемы с jQuery с мобильным сайтом

Question

У меня есть вопрос о JQuery. Я пытаюсь создать мобильную часть моего сайта, и я сталкиваюсь с ошибкой. Поэтому у меня есть CSS для 3 разных размеров экрана (480, тип планшета и значение по умолчанию). Мобильная версия имеет больше компоновки плитки с jQuery, но я хочу, чтобы она работала с размером экрана 480 для мобильных устройств. Я делаю это с помощью этой

$(document).ready(function() { 
    if ($(window).width() < 481) { 

Исправлена ​​ошибка, я нахожу, что, если я нахожусь на своем телефоне и загрузить сайт в портретном режиме, а затем включите мой экран, чтобы перейти в режим альбомной обновления CSS правильно, так что Безразлично» t сделать тип плитки больше, но больше столбцов, но затем jQuery все еще работает, где я могу переключать вещи, которые я не хочу переключать для этого размера, только параметр плитки. Есть какой-либо способ сделать это? Если я загружаю свой сайт в ландшафтном режиме, jQuery не загружается (что хорошо), то только при переключении. Я знаю, это потому, что он проверяет размер экрана при загрузке страницы, но у кого есть идеи обходных решений?

Answer 1

Поскольку вы используете медиа-запросы для того же разрешения, вот что я делаю.

В вашем JQuery проверяется изменение медиа-запроса. Например, предположим, что у вас есть это:

@media (max-width: 480px) { 
     #someDiv { 
      display:none; 
    } 
} 

В вашем JQuery, то вы можете сделать это:

if($("#someDiv").css("display") == "none") { 
    // do whatever you want in Javascript that will only be run if that css media query is triggered 
}