Javascript 屏幕 Width/Media 查询如果语句 Returns 如果为真则出现警告框

Javascript Screen Width/Media Query If Statement That Returns an Alert Box if True

我 非常 Javascript 和整个 Web 开发的新手，我对这里的 If 语句很着迷。此代码的 objective 用于读取屏幕宽度（或媒体查询）是否低于 450 像素，如果是，则显示警告框 - 我目前只需要它在一页上工作。

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) {

除此之外的其他一些解决方法现在都忘记了，当然，这些方法也有同样的失败结果。

任何对我在这件事上出错的地方的帮助将不胜感激，

谢谢，

会

window.onload

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

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

这样你设置 window.onload 等于一个函数，而不是调用函数的 return。

获取屏幕宽度

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

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

额外：检测调整大小

如果您想检测变化，您可以在 window 调整大小时添加一个侦听器。

document.addEventListener('resize', fullQuote);

但是我不建议在使用偶数侦听器时使用警报，因为警报是同步操作，这可能会导致一些问题或卡顿。