Javascript-Code Hinzufügen von etwas, das nicht dort sein sollte

Question

Ich erstelle eine Website und ich möchte ein Menü stylen, das nur eine Möglichkeit zeigt, wenn bei bestimmten px Breite angezeigt wird. Ich werde später den Code ändern, um eine if-Anweisung zu machen, die prüft, ob es ein Touchscreen ist. Aber jetzt muss ich px Breite um den Code zu testen. Obwohl mein aktueller Code eine bestimmte Breite korrekt lädt, nachdem ich zu einer höheren Breite gewechselt habe, fügt er immer noch meine Beschriftung und Eingabe hinzu. My codepen

Mein JavaScript-Code.

var mediaTab = window.matchMedia("(max-width: 1024px)"); 
 

 
    function addmenu() { 
 
    if (mediaTab) { 
 
     var menu = document.querySelector("#top-lvl-menu"); 
 
     var navBar = document.querySelector("nav"); 
 
     var navToggle = document.createElement("label"); 
 
     var navInput = document.createElement("input"); 
 

 
     navToggle.innerHTML = "☰ Menu"; 
 
     navToggle.className = "menu"; 
 
     navInput.id = "menu-Toggle"; 
 
     navInput.type = "checkbox"; 
 
     navToggle.appendChild(navInput); 
 

 
     navBar.insertBefore(navToggle, menu); 
 
     navToggle.appendChild(menu); 
 
    } 
 
    } 
 
    window.addEventListener("load", addmenu, false);

<nav> 
 
    <ul id="top-lvl-menu"> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
     <ul id="services-submenu"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

Von MDN window.matchMedia:

Gibt ein neues Objekt MediaQueryList die analysierten Ergebnisse der angegebenen Medien Query-String darstellt.

Daher gibt es ein Objekt unabhängig davon zurück, ob die Fenstergröße die Medienabfrage erfüllt.

Zum Glück ist das Objekt Renditen enthält eine "Übereinstimmungen" -Eigenschaft.

Versuchen:

... 
if(mediaTab.matches){...} 

EDIT: Auch diese Methode nur so weit zurück wie IE10 unterstützt wird. Sie sollten in Erwägung ziehen, nur window.innerWidth zu verwenden und dann innerhalb der if-Anweisung zu vergleichen.

var mediaTab = window.innerWidth; 
if(mediaTab < 1024){...}