Как отключить js для мобильных устройств и планшетов?

Question

[Наталья Пронина]

Мне нужно было, чтобы колонки на сайте были одного размера, чтобы фон сайдбара доходил до конца страницы.

Я нашла и вставила кусок кода:

jQuery(function($){
var max_col_height = 0; // максимальная высота, первоначально 0
$('.column').each(function(){ // цикл "для каждой из колонок"
if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
}
});
$('.column').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
});

Но теперь на мобильных устройствах сайдбар имеет длину колонки контента, т.е. много пустого пространства. Помогите, пожалуйста, его убрать.

Я не специалист, отвечать мне нужно как первокласснику, пошагово и с комментариями.

Answer 1

[Super User]

JS не нужен. Используйте flexbox.

<div class="container">
    <div class="sidebar">
      <h3>Сайдбар</h3>
    </div>
    <div class="content">
      <h3>Контент</h3>
    </div>
  </div>

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.sidebar {
  width: 20%;
  padding: 10px;
  background-color: skyblue;
}

.content {
  width: 80%;
  padding: 10px;
  background-color: violet;
}

jsbin.com/murayutupe/1
P.S.: на мобильных нужно будет добавить media query правило по нужному размеру экрана и выстроить колонки по вертикали через flex-direction.

@media (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .sidebar, .content {
    width: 100%;
  }
}

Comments

[Наталья Пронина]

Спасибо, все получилось!

Answer 2

[IceJOKER]

Для вашей задачи не нужен JS, тем более jQuery.
Хватит и простого css.
https://jsfiddle.net/m9p8m07f/
www.hongkiat.com/blog/css-equal-height
vanseodesign.com/css/equal-height-columns

И не учите как вам отвечать - "отвечать мне нужно как первокласснику, пошагово и с комментариями." - вам никто ничем не обязан!

Answer 3

[jekaD]

Вот вам ссылка на плагин для определения устройства https://github.com/matthewhudson/device.js?
Инициализируете ваш код если устройство = desktop