Question

当前的Slim.html：

#fullpage
  =render partial: 'section_one'
  =render partial: 'section_two'
  =render partial: 'section_three'
  =render partial: 'section_four'
  =render partial: 'section_five'

我遇到的问题是我不想渲染部分：'section_four'是在移动设备上观看的。

我试过了：

#fullpage
  =render partial: 'section_one'
  =render partial: 'section_two'
  =render partial: 'section_three'
  - if $(window).width() >= 700
    =render partial: 'section_four'
  =render partial: 'section_five'

但它不起作用。有什么想法吗？

Answer 1

尝试使用request.user_agent识别移动设备。此外，您还应在检查移动设备时使用内联if条件：

= render partial: 'section_four' if request.user_agent =~ /Mobile|webOS/

在某些情况下，由于浏览器的自定义user_agent，request.user_agent =~ /Mobile|webOS/无法返回预期结果。

因此，我建议Mobile-Fu以更好的方式使用它。

Answer 2

$(window).width() >= 700是一个javascript代码，你不能这样做。除了使用request.user_agent ，您还可以使用css media-queries选择性地显示或隐藏部分 中的内容。让我们假设您的部分section_four具有以下内容：

#some_id
  .your_content

现在您可以通过css定位#some_id并根据您的设备宽度显示或隐藏

@media all and (max-width: 699px) {
  #some_id {
    display: none;
  }
}

有关详情，请查看css media queries

用细长渲染部分

2 个答案: