[英]Do something if screen width is less than 960 px
如果我的屏幕寬度小於 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');
}
});
對於 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 標志。
我建議不要將 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 輕松獲得窗口的寬度:windowWidth 和 Height 使用: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()
試試這個代碼
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 JS 的問題的解決方案是,
window.addEventListener("load", function () {
if (window.innerWidth < 960) { doSomething(); }
}
這可行,但有一個問題,每當在開發工具中調整屏幕大小時,這對開發人員來說是一件很常見的事情,function 所做的事情不會被解雇。
例如,如果我們在屏幕大小超過 1000px 的計算機上顯示網頁,則不會觸發 function,當我們將 windows 的大小調整為小於目標(此處為 960px)時,我們希望該事件被觸發,但事實並非如此。
等到腳本文件已經處理完畢並且不會被重新讀取時,我們需要在調整屏幕大小時觸發一個事件並使用“addEventListener”處理該事件,就像這樣;
window.addEventListener("resize", (e) => {
const windowWidth = window.innerWidth;
if (windowWidth > 960) { doSomething(); }
if (windowWidth < 960) { doSomething(); }
});
最佳實踐是將項目中的兩個代碼片段結合起來。
使用 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 (screen.width <= 960) {
alert('Less than 960');
} else if (screen.width >960) {
alert('More than 960');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.