jQuery - проблема с выбором вида для отображения в зависимости от размера экрана

Question

Я добавил в свой рельс приложение jQuery, чтобы превратить элементы навигации в выпадающий список, если размер экрана ниже 755 пикселей.У меня это работает на 90%.Я работаю при изменении размера, а также для обновления.У меня проблема при нажатии на любую ссылку, по которой он загружает оба просмотра.

Я нашел свой текущий код здесь в StackOverflow.Я подозреваю, что это как-то связано с document.ready, но это не моя область знаний.

$(window).resize(function() {
  if ($(window).width() < 755) {
    $("#web").hide();
    $("#mob").show();
  }
  else{
    $("#web").show();
    $("#mob").hide();
  }
});

$(window).load(function() {
  if ($(window).width() < 755) {
    $("#web").hide();
    $("#mob").show();
  }
  else{
    $("#web").show();
    $("#mob").hide();
  }
});

Я бы хотел, чтобы он загружал правильную навигацию при нажатии на любую ссылку.Спасибо!

Answer 1

Спасибо, Стефан Шрайвер. Я решил это с помощью следующего.

@media only screen and (max-width: 754px) {
  .mob-nav {
    display: inline;
  } 
  .web-nav {
    display: none;
  }
}

@media only screen and (min-width: 755px) {
  .mob-nav {
    display: none;
  } 
  .web-nav {
    display: inline;
  }
}