ModX如果屏幕宽度是特定大小，则输出一个块

Question

因此，如果浏览器宽度为590px或更低（移动视图），我会尝试输出一长串HTML代码。我有一个简单的javascript函数来确定调整大小时屏幕的宽度，但是如果该函数返回true，我该如何输出一个块？

我设想它的方法是将功能放在它自己的块中，但是我不能让块返回任何输出过滤器，例如
        [[$isMobile:eq= {真{1}} [[$ MobileChunk]] :then=

由于

Answer 1

  

我有一个简单的javascript函数来确定调整大小时屏幕的宽度，但是如果该函数返回true，我该如何输出一个chunk？

JS无法修改MODX输出。 MODX也不能依赖JS。这都是因为你在前端有JS而在后端有PHP。

无论如何，你可以用不同的方式解决你的问题。

1. 首先，您可以检查用户的用户代理并根据结果修改输出。
2. 评论中已经提到了另一种方法。您可以使用display:none渲染阻止html元素，并在宽度为590或更小时将其设为block。但这对SEO来说并不好，因为搜索引擎可以获得这些内容。
3. 此外，您可以向服务器发出AJAX请求，并使您的块成功。

Answer 2

我认为您使用http://modx.com/extras/package/mobiletemplateswitcher

执行此操作

从未使用过它。我想你可以在模板中使用不同的“模板”。

<mobile>
  {{mymobilechunk}}
</mobile>
<template>
  {{mynormalchunk}}
</template>

它不是最好的方式，但你可以使用CSS。 除此之外，我认为不可能......

@media all and (max-width: 590px) {
    .mobile-show{display:block;}
    .mobile-hide{display:none;}
}