Code ausführen, wenn der Bildschirm eine bestimmte Breite hat

Question

Ich versuche gerade eine Nachricht in der Konsole zu schreiben, wenn die Größe des Fensters weniger als 700 px beträgt.

Die Dinge, die ich versucht habe, ist:

if(window.innerWidth < 700){ 
console.log("hello"); 
} 

Und

if(screen.width < 700){ 
console.log("hello"); 
} 

Ich bekomme keine Fehler meassages aber der Code nicht ausgeführt. Wenn ich "px" nach dem 700 gebe, bekomme ich die Fehlermeldung "Uncaught SyntaxError: Unexpected identifier".

Answer 1

Sie müssen dies innerhalb der window 's resize Event Listener setzen. Außerdem müssen Sie window.innerWidth verwenden und es wird immer ein ganzzahliger Wert zurückgegeben.

if (window.attachEvent) { 
 
    window.attachEvent('onresize', function() { 
 
    if (window.innerWidth < 760) 
 
     console.log("Less than 760"); 
 
    else 
 
     console.log("More than 760"); 
 
    }); 
 
} else if (window.addEventListener) { 
 
    window.addEventListener('resize', function() { 
 
    if (window.innerWidth < 760) 
 
     console.log("Less than 760"); 
 
    else 
 
     console.log("More than 760"); 
 
    }, true); 
 
} else { 
 
    //The browser does not support Javascript event binding 
 
}

Answer 2

onResize(); 
window.addEventListener('resize', onResize); 

function onResize(){ 
    var width = document.documentElement.clientWidth; 
} 

Answer 3

Sie müssen sich für 'die Größe' Ereignis auf 'Fenster' hören:

window.addEventListener('resize', resize); 

function resize() { 

    if (window.innerWidth < 700) { 

     console.log('window.innerWidth < 700'); 
     // window.removeEventListener('resize', resize); // once 
    } 
} 

weitere Informationen über .addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener