根据窗口宽度加载不同的TPL

Question

我尝试根据窗口宽度加载不同的TPL（或者我也可以设置变量）。 所以，我想我可以使用这样的代码或至少获得两种不同的窗口：

基本上，这是我想要的结果：

if($(window).width() < 960){
  include file="small.tpl"
};

else{
 include file="big.tpl"
};

或类似的东西：

if ($(window).width() < 960) 
   {assign var="numcolumns" value="1"};

else 
  {assign var="numcolumns" value="2"};

任何简单的建议？

Answer 1

抱歉，但不会这样。你不能使用JavaScript条件加载PHP（而Smarty是事实上的PHP）。

您可以做的最好的事情是，在JavaScript中包含两个文件并依赖于检测窗口来隐藏不需要的块。

然而，这不是最好的技巧。我建议您使用响应式Web设计技术来显示站点，无论客户端窗口宽度如何。

修改

工作代码（不使用jQuery）

<div id="big">
   {include file="big.tpl"}
</div>
<div id="small">
   {include file="small.tpl"}
</div>

<script type="text/javascript">


if (window.innerWidth < 960) 
    document.getElementById('big').style.display = 'none';
else 
    document.getElementById('small').style.display = 'none';

</script>