根据视口渲染yield语句？

Question

我有以下HTML标记：

<div id="site-wrapper" class="show-for-large-only">
  <div id="site-canvas">
    <%= yield %>
  </div>
</div>

对于移动设备，我想要一个额外的部分，如：

<div class="show-for-small-only">
    <%= yield %>
</div>
<div id="site-wrapper" class="show-for-large-only">
  <div id="site-canvas">
    <%= yield %>
  </div>
</div>

使用CSS我可以隐藏div，具体取决于用户的视口。

有没有办法避免将yield的内容渲染两次，即只渲染相关的div？

Answer 1

服务器不了解客户端屏幕大小和可用视口。除非您在查询字符串中指定它或单独的ajax请求，否则我认为无法确定。

在您的位置，我会为所需的移动内容提供额外的ajax get请求。

编辑：

在您的控制器中，您可以使用request object按http标头确定用户代理。我会为此写一个帮手。将结果保存为@is_mobile_agent等实例变量，在您的视图中，您需要在if之前添加yield语句。像

这样的东西

yield if @is_mobile_agent