Question

我希望在移动设备上为我的平台使用不同的视图，具体取决于页面方向（纵向与横向）。

有没有办法解决这个问题：

<div class="row item-list-video">
  <% for program in @programs %>
    <% if (stylesheet_link_tag "global", :media => "only screen and (max-width: 990px)") %>
      <%= render partial: 'program_preview_landscape',locals: { program: program}  %>
    <% else %>
      <%= render partial: 'program_preview',locals: { program: program} %>
    <% end %>
  <% end %>
</div>

我不确定这部分是如何工作的：

if (stylesheet_link_tag "global", :media => "only screen and (max-width: 990px)")

我的想法是stylesheet_link_tag是定义媒体查询的.css的文件名。但我得到的是：

Asset was not declared to be precompiled in production. Add Rails.application.config.assets.precompile += %w( global.css ) to config/initializers/assets.rb and restart your server

program_preview_landscape加载此代码：

<div class="col-md-3 col-sm-6 col-xs-3 program-thumbnail-landscape">
  <a href="/shows/<%= program.slug %>">
    <img src="<%= program.thumbnail_uri %>">
  </a>
</div>

虽然program_preview加载了这个：

<div class="col-md-3 col-sm-6 col-xs-6 program-thumbnail">
  <a href="/shows/<%= program.slug %>">
    <img src="<%= program.thumbnail_uri %>">
  </a>
</div>

Answer 1

您无法从ERB中读取媒体查询，因为媒体宽度仅在HTML交付后才在浏览器中计算得出，届时ERB已被呈现。解决这类问题的常用方法是让ERB使用semantic markup（对于台式机和移动设备，相同 HTML）生成HTML，然后使用CSS media queries来应用不同的样式取决于屏幕宽度。

如何使用Ruby on Rails检测哪些媒体查询处于活动状态？

1 个答案: