如果屏幕宽度小于960像素，做点什么

Do something if screen width is less than 960 px

本文关键字：什么 960像素 小于 屏幕 如果      更新时间：2023-09-26

如果我的屏幕宽度小于960像素，我如何使jQuery做一些事情?下面的代码总是触发第二个警报，不管我的窗口大小:

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');
}

您可能需要将它与一个resize事件结合使用:

 $(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

然后你可以很容易地得到窗口的宽度与var: windowWidthand Height with: windowHeight

否则，获取一个js库:http://wicky.nillia.ms/enquire.js/

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

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

use 

$(window).width()

或

$(document).width()

或

$('body').width()

对于使用Vanilla JS的问题，我的解决方案是，

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

这个可以工作，但是有一个问题，每当在开发工具中调整屏幕大小时，这对开发人员来说是一件很常见的事情，这个函数做的事情不会被触发。

例如，如果我们在屏幕尺寸大于1000px的计算机上显示网页，该函数将不会被触发，当我们将窗口大小调整到小于目标(这里是960px)时，我们期望事件被触发，但事实并非如此。

当脚本文件已经处理完成并且不会被重新读取时，因此我们需要在调整屏幕大小时触发一个事件，并使用"addEventListener"处理该事件，就像这样;

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

最好的做法是在项目中结合这两个代码片段。

试试这个代码

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>

使用香草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');
}

相关文章：