如果我的屏幕宽度小于 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');
}
您可能想将其与调整大小事件结合起来：
$(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.innerWidthif (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 : windowWidth 轻松获取窗口的宽度 和高度：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();
}
});});
使用
$(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>使用 Vanilla 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 与特定条件发生变化。
/**
* Call functions when collapse or expand. Default breakpoint width '576px'
* @param {Function} collFunc function to call if less than breakpoint
* @param {Function} expFunc function to call if bigger than breakpoint
* @param {number} brkp breakpoint
*/
function CollapseCall(collFunc, expFunc, brkp = 576) {
let isCl = !window.innerWidth < brkp;
callfunc = () => {
if (window.innerWidth < brkp && isCl == false) {
isCl = true;
if (typeof collFunc === "function") collFunc();
}
else if (window.innerWidth >= brkp && isCl == true) {
isCl = false;
if (typeof expFunc === "function") expFunc();
}
}
window.addEventListener("resize", callfunc);
callfunc();
}
不，这些都行不通。你需要的是这个！！！
试试这个：
if (screen.width <= 960) {
alert('Less than 960');
} else if (screen.width >960) {
alert('More than 960');
}