如果屏幕宽度小于960像素，请做一些事情

我如何使jQuery做些什么，如果我的屏幕宽度小于960像素？ 无论我的窗口大小如何，下面的代码总是会触发第二条警报：

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

Answer 1

使用jQuery来获取窗口的宽度。

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

Answer 2

您可能希望将其与resize事件相结合：

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

对于RJ：

 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标志。;

Answer 3

我会build议（需要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

然后你可以用var：windowWidth和Height：windowHeight轻松获得窗口的宽度

否则，得到一个js库： http : //wicky.nillia.ms/enquire.js/

Answer 4

使用

 $(window).width() 

要么

 $(document).width() 

要么

 $('body').width() 

Answer 5

 // 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(); }); 

Answer 6

我知道我迟迟不回答这个问题，但我希望这对任何有类似问题的人都有帮助。 当页面因任何原因刷新时，它也可以工作。

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

Answer 7

试试这个代码

 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> 

Answer 8

您也可以使用javascript进行媒体查询。

 const mq = window.matchMedia( "(min-width: 960px)" ); if (mq.matches) { alert("window width >= 960px"); } else { alert("window width < 960px"); } 

Answer 9

不，不会的。 你需要的是这个！

尝试这个：

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