Javascript媒體查詢不起作用

Question

好的，這樣的代碼可以正常工作（運行必需的javascript字段），但是我希望它只能在移動設備上運行，因此我嘗試添加一個媒體查詢，以便僅在移動設備上（低於400像素）運行javascript。 不知道我是否錯過了一些愚蠢的事情或做的事情完全錯誤。

function validateForm() {
    if (window.matchMedia("(min-width: 400px)").matches) {
    } else {        
        var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
            alert("Name must be filled out");
            return false;
        }
    }
    }   


    </script>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
    </form>

Answer 1

這里參考

// media query event handler

if (matchMedia) {
    var mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    if (mq.matches) {
        // window width is at least 500px
    }
    else {
        // window width is less than 500px
    }

}