如果屏幕寬度小於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像素，可以做點什麼？

回答

相關問題