Блог

Как я могу заставить jQuery что-то делать, если ширина моего экрана меньше 960 пикселей? Приведенный ниже код всегда выдает 2-е предупреждение, независимо от размера моего окна:

 if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}
  

Используйте jQuery, чтобы получить ширину окна.

 if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}
  

Возможно, вы захотите объединить это с событием изменения размера:

  $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});
  

Для R.J.:

 var eventFired = 0;

if ($(window).width() < 960) {
    alert('Less than 960');

}
else {
    alert('More than 960');
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 960) {
            alert('Less than 960 resize');
        } else {
            alert('More than 960 resize');
        }
    }
});
  

Я пытался http://api.jquery.com/off / безрезультатно, поэтому я пошел с флагом eventFired.

Я рекомендую не использовать jQuery для такой вещи и продолжить window.innerWidth :

 if (window.innerWidth < 960) {
    doSomething();
}
  

Вы также можете использовать медиа-запрос с помощью javascript.

 const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}
  

 // Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});
  

Я бы посоветовал (требуется jQuery) :

 /*
 * windowSize
 * call this function to get windowSize any time
 */
function windowSize() {
  windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
  windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

}

//Init Function of init it wherever you like...
windowSize();

// For example, get window size on window resize
$(window).resize(function() {
  windowSize();
  console.log('width is :', windowWidth, 'Height is :', windowHeight);
  if (windowWidth < 768) {
    console.log('width is under 768px !');
  }
});
  

Добавлено в CodePen :
http://codepen.io/moabi/pen/QNRqpY?editors=0011

Тогда вы можете легко получить ширину окна с помощью параметра: windowWidth и высоту с помощью: windowHeight

в противном случае получите библиотеку js: http://wicky.nillia.ms/enquire.js /

используйте

 $(window).width()
  

или

 $(document).width()
  

или

 $('body').width()
  

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

 $(document).ready(function(){

if ($(window).width() < 960 amp;amp; $(window).load()) {
        $("#up").hide();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }

$(window).resize(function() {
    if ($(window).width() < 960 amp;amp; $(window).load()) {
        $("#up").hide();
    }
    else{
        $("#up").show();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }
    else{
        $("#up").show();
    }

});});
  

Попробуйте этот код

 if ($(window).width() < 960) {
 alert('width is less than 960px');
}
else {
 alert('More than 960');
}
  

    if ($(window).width() < 960) {
     alert('width is less than 960px');
    }
    else {
     alert('More than 960');
    }  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  

Мое решение вопроса с использованием ванильного JS,

 window.addEventListener("load", function () {
  if (window.innerWidth < 960) { doSomething(); }
}
  

Это работает, но с одной проблемой: всякий раз, когда изменение размера экрана в инструментах разработки, что является обычным делом для разработчиков, функция, выполняющая что-то, не будет запущена.

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

К тому времени файл сценария уже обработан и завершен и не будет перечитан, поэтому нам нужно запускать событие всякий раз, когда мы изменяем размер экрана и обрабатываем это событие с помощью «addEventListener», вот так;

 window.addEventListener("resize", (e) => {
  const windowWidth = window.innerWidth;
  if (windowWidth > 960) { doSomething(); }
  if (windowWidth < 960) { doSomething(); }
});
  

Лучшая практика — объединить оба фрагмента кода в проекте.

Простое и понятное решение с использованием ванильного JavaScript

 let app = document.getElementById('app')
 

const changeColorFn = ( app, color ) => {
  app.setAttribute("style",`background: ${color}`)
}


const winSizeFn = ( winWidth, callback, app, color ) => { 
  if (window.innerWidth < winWidth ) {
    callback(app, color);
  }
}


  winSizeFn( '1200', changeColorFn, app, 'red' )
  winSizeFn( '800', changeColorFn, app, 'green' )
  winSizeFn( '500', changeColorFn, app, 'blue' )


window.addEventListener("resize", (e) => {
  // add winSizeFn here if you want call function on window resize 
})  

 <div id="app">My app content</div>  

нет, ничего из этого не сработает. Что вам нужно, так это это !!!

Попробуйте это:

 if (screen.width <= 960) {
  alert('Less than 960');
} else if (screen.width >960) {
  alert('More than 960');
}