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
    }

}