Ändern Sie den Wert einer Variablen bei Rotation Js

Question

Also im Grunde habe ich gegoogelt und getan, wie dies zu tun, aber es nicht geschafft, es zu arbeiten .. Ich habe eine Variable namens Breite deklariert. Ich möchte, dass mein JS prüft, ob die Breite des Bildschirms kleiner als 660 Pixel ist, dann sollte die Breite 140 Pixel betragen, andernfalls sollte sie 100 Pixel groß sein. Die Variable Breite sollte sich nur ändern, wenn ich das Gerät "Telefon" rotiere, aber es funktioniert nicht? Ich möchte die Variable sollte die Breite des Bildschirms überprüfen, wenn ich das Gerät drehen. Ich habe lange daran gearbeitet, konnte es aber nicht lösen. Ich weiß von Medien-Anfragen, aber ich möchte die Variable in JS aus anderen Gründen ändern ..

JS

var width = 0; 
    function check() 
    { 

if (window.innerWidth < 660) 
    { 
    width = 140; 
    } 
    else{ 
    width = 100; 
    } 
} 


window.addEventListener("orientationEvent", check); 
document.write(width); 

Answer 1

Ich würde Ihnen vorschlagen, Blick in window.matchMedia und MediaQueryList.

Beachten Sie jedoch, dass dies die neuesten und experimentellen Funktionen sind und möglicherweise nicht von allen Browsern unterstützt werden.

Nun ist die nächste Sache Aufruf changeWidth Methode, wenn Ansichtsfenster ändert.

var width = 0; 
function changeWidth() { 

    if (window.matchMedia("(min-width: 600px)").matches) { 
     /* the viewport is at least 600 pixels wide */ 
     width = 140; 
    } else { 
     /* the viewport is less than 600 pixels wide */ 
     width = 100; 
    } 

} 

Weitere Dokumentation bezogenen Informationen here.

Answer 2

Die Veranstaltung deviceorientation genannt wird, so wird Ihr Code sein:

window.addEventListener('deviceorientation', check); 

Denken Sie daran, dass Ereignisse in Javascript nur Kleinbuchstaben sind.

Answer 3

Eigentlich solltest du Liste orientationChange MDN

var width = 0; 
 

 
function check(){ 
 
    if (window.innerWidth < 660) { 
 
    width = 140; 
 
    } else { 
 
    width = 100; 
 
    } 
 
    
 
    // Just for demo 
 
    document.querySelector('body').innerHTML = width; 
 
} 
 

 

 
window.addEventListener("orientationchange", check);