Question

我有2套javascript代码。一个用于普通（桌面视图），另一个用于移动设备（以及低于500px的任何内容）。

这是普通（桌面视图）的javascript：

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

这是我用于移动设备的javascript：

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

正如您所看到的，我在此尝试实现的是，它删除了移动设备的部分文本。因此，它会让事情看起来变得更加混乱。

是否可以运行第一段javascript，除非调整窗口大小或使用移动设备访问（例如，宽度小于480px）。

并且javascript可以动态更改（如调整窗口大小）？

来自WHMCS使用Smarty模板，但是我可以通过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 */
}

如果您需要在调整屏幕大小时做出反应，请不要忘记查看returned object of matchMedia

Answer 2

使用jQuery，你可以

				var sliderProductNames = '';
				$(window).resize(function() {
				  if ($(window).width() > 640) {
				    sliderProductNames = '[{foreach $products as $product}"{$product.name|replace:\"Brandname \":\"\"}",{/foreach}]';
				  } else {
				    sliderProductNames = '[{foreach $products as $product}"{$product.name}",{/foreach}]';
				  }
				  $('#txtarea').append(sliderProductNames + "<br>");
				});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=txtarea></div>

根据屏幕宽度（动态）通过Javascript运行2个不同的代码？

2 个答案: