Медиа-запросы и проблема с JQuery

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

Моя проблема заключается в том, что если я переключаю элемент и расширяю (показываю), а затем поворачиваю устройство в альбомную ориентацию, элемент останется расширенным, однако используется другой медиа-запрос, указывающий, что этот div или что-то еще нужно скрыть. Я думаю, это потому, что переключатель Jquery добавляет атрибуты стиля к фактическому HTML, а не к CSS. Есть ли способ получить правильную страницу, поэтому сбросьте переключатель? если это имеет смысл?

Спасибо

Дэйв


jquery css media-queries
person davey    schedule 26.07.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если вы добавите следующий код на свой сайт, он добавит класс к узлу body альбомной или портретной ориентации, который вы затем сможете использовать в своем css. Надеюсь, это должно помочь.

window.onorientationchange = function() {
  var orientation = window.orientation;
  if (orientation == 0) {
    document.body.setAttribute("class","portrait");
  }else{
    document.body.setAttribute("class","landscape");  
  }
}
person mortimer    schedule 26.07.2012

arrow_upward
0
arrow_downward

в своих функциях вы можете переписать правила css, например:

document.styleSheets[0].cssRules[1].style.some_attribute='some value';

1 есть порядок правил (начинается с 0)

person Robot Woods    schedule 02.08.2012