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

154

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

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

    alert('More than 960'); 
}

来源

2011-10-10 Evans

你是在页面加载时进行此操作，还是在调整浏览器大小时执行此操作。它总是一个好主意，说alert（screen.width）看看什么是用来决定。 –

为什么不[媒体查询]（http://www.css3.info/preview/media-queries/）？ – bzlm

为什么不媒体查询？我可以想到任何媒体查询都不会有任何帮助的情况。如果jdln想要使用jQuery，让我们假设他有充分的理由这样做。 – Luke

325

使用jQuery获得窗户的宽度。

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

来源

2011-10-10 15:30:33

+10

请注意，如果滚动条可见，$（window）.width（）在浏览器中不一致。我发现使用[javascript媒体查询]（https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238）更可靠。 – forsvunnet

使用

$(window).width()

或

$(document).width()

或

$('body').width()

来源

2011-10-10 15:29:54 Guard

112

您可能希望将其与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标志去了。

来源

2011-10-10 15:32:57

在resize事件中进行换行只会使其在调整大小时触发，而不会在加载时触发。 – Ted

@Ted这就是为什么我说'结合它'。 –

嘿，你是否介意我将如何去结合这个调整大小事件？如果浏览器宽度大于960像素，无论是初始页面加载时的窗口大小，还是调整大小之前/之后，我都有一个函数只能加载。如果我在第一次检测窗口宽度后添加此代码段，如果用户启动的浏览器宽度大于960像素，然后调整大小，则该功能已经加载。如果浏览器调整到960像素以下的宽度，是否可以清除已被触发的函数？ –

-8

nope，这一切都不行。你需要的是this!!!

试试这个：

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

来源

2013-09-18 05:32:02

发布链接不是答案。 – nedaRM

抱歉，我有点匆忙！等一下，我现在正在做... –

我建议（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 和高度：windowHeight

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

来源

2014-11-19 11:18:33 moabi

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

来源

2016-01-25 14:56:40 leymannx

我知道我迟到回答这个问题，但我希望它是有一定的帮助，以人谁也有类似的问题。它也适用于因任何原因刷新页面的情况。

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

});});

来源

2016-12-09 01:54:11

试试这个代码

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>

来源

2016-12-29 11:00:16

您还可以使用媒体查询与JavaScript。

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

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

来源

2017-08-30 09:38:34

与[ie11]（https://caniuse.com/#feat=matchmedia）一起使用 –

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

回答

相关问题