2

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

function SCREENmove() {
  width = document.documentElement.clientWidth;
  height = document.documentElement.clientHeight;
  if (width > 799) {
    $('.node').addClass("response")
  } else {
    $('.node').removeClass("response")
  }
}
$(window).resize(SCREENmove);
$(document).ready(SCREENmove);
.node {
  width: 100%;
  height: 50px;
  display: block;
  position: relative;
  background: #CDDC39;
}
.node.response {
  background: #FF9800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="node"></div>

работает при сужении: введите сюда описание изображения

мобильная (класс не удалился): введите сюда описание изображения

9
  • А что должно происходить? У вас если ширина меньше то удаляется класс "response" которого изначально нет в верстке. Если ширина на телефоне меньше 799 пикселей то ничего происходить и не будет. 20 сен 2016 в 6:36
  • @DmitriyKondratiuk, для этого и задал разные цвета, если горит оранжевым значит класс есть. Если включить просмотр с мобильного устройства, то горит оранжевым (класс есть) к тому же он есть в коде, класс не удалился. Если же просто сужать экран то класс удаляется
    – engenes
    20 сен 2016 в 6:40
  • Ну в вашем примере изначально "response" класса нет <div class="node"></div>. 20 сен 2016 в 6:47
  • Оранжевый цвет указан для класса response,смотрите внимательно. На настольной версии (если ширина указана больше 799) появляется response при сужении он пропадает, но на мобильном класс остается хотя ширина меньше 799
    – engenes
    20 сен 2016 в 6:49
  • @DmitriyKondratiuk поменял скрины чтобы было понятно
    – engenes
    20 сен 2016 в 6:58

1 ответ 1

1

Добавьте <meta name="viewport" content="width=device-width"> в <head></head> Без него document.documentElement.clientWidth не верно возвращает ширину экрана в режиме эмулятора, например, в опере это всегда 980px не зависимо от ширины эмулятора. Поэтому и есть, он не "не удалился", а наоборот добавился, т.к. ширина возвращается больше, чем 799px

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.