JavaScript屏幕宽度/媒体查询If语句，如果为True，则返回警报框

Question

我非常新的JavaScript和Web开发作为一个整体，我很卡与if语句在这里。 这段代码的目的是读取屏幕宽度（或媒体查询）是否小于450px，如果显示，则显示一个警告框-我现在只需要在一页上工作即可。

HTML：

either

<body onload="fullQuote()">

-or- (I'm not sure if the second actually works)

<script>window.onload = fullQuote()</script>

JavaScript：

function fullQuote() {
var mediaQuery = window.matchMedia("(max-width: 450px)");
if (mediaQuery.matches) {
    alert("Test");
    }
}

我似乎在任何地方都找不到有关此代码出了什么问题的答案，但是我尝试了各种方法来找出屏幕尺寸，例如

if (screen.width <= 450) {
if (document.documentElement.clientWidth < 450) {

以及if括号内的布尔值：

if (mediaQuery.matches == true) {

除此以外的其他方法现在已丢失到内存中，这些内存当然共享相同的失败结果。

对于我在这方面出了错的任何帮助，将不胜感激，

谢谢，

将

Answer 1

window.onload

这将不起作用，因为在设置window.onload属性时正在调用该函数。 您需要这样写。

<script>window.onload = fullQuote</script>

这样，您将window.onload设置为等于一个函数，而不是调用函数的返回。

获得屏幕宽度的理想方法是使用window.innerWidth

if(window.innerWidth < 451) //...

如果要检测更改，可以在窗口调整大小上添加一个侦听器。

document.addEventListener('resize', fullQuote);

但是我不建议在使用监听器时使用警报，因为警报是同步操作，这可能会引起一些问题或麻烦。