javascript - 根据屏幕宽度(动态)通过 Javascript 运行 2 段不同的代码？

Question

我有两套javascript代码。一种用于普通(桌面 View )，另一种用于移动设备(以及任何低于 500 像素的设备)。

这是正常的 javascript 片段(桌面 View ):

var sliderProductNames = [
{foreach $products as $product}
    "{$product.name}",
{/foreach}
];

这是我为移动设备准备的一段 javascript:

var sliderProductNames = [
{foreach $products as $product}
    "{$product.name|replace:'Brandname ':''}",
{/foreach}
];

如您所见，我在这里试图实现的是，它删除了移动设备的一部分文本。所以它会让事情看起来不那么“困惑”。

是否可以运行第一段 javascript，除非调整窗口大小或使用移动设备访问(比如宽度小于 480 像素的任何内容)。

javascript 能否动态更改它(如调整窗口大小)？

它来自使用 Smarty 模板的 WHMCS，但是我可以通过 javascript 检测根据屏幕宽度运行这两段代码吗？

提前谢谢你。

Answer 1

你可以不用 jQuery 来做，看看 matchMedia .

if (window.matchMedia("(min-width: 400px)").matches) {
    /* the viewport is at least 400 pixels wide */
} else {
   /* the viewport is less than 400 pixels wide */
}

如果您需要在调整屏幕大小时使用react，请不要忘记检查 returned object of matchMedia