用于 rails 条件的 Javascript 输出

Question

以下 JavaScript 返回浏览器的视口(viewport):

<script>
  $(document).ready(function(e) {
    showViewportSize();    
  });
  $(window).resize(function(e) {
     showViewportSize();
  });
  function showViewportSize() {
     var the_width = $(window).width();
     var the_inner_width = window.innerWidth;                   
     $('#width').text(the_width);
     $('#inner_width').text(the_inner_width)
  }
</script>

浏览器可以通过以下方式显示该值

<span id="inner_width"> Resize me </span>

假设要根据初始视口(viewport)宽度:

<% if width > 1440 %>
  <%= image_tag(...
<% elsif width <= 1440 && width > 1200 %>
  <%= image_tag(...
<% else %>
  <%= image_tag(...
<% end %>

Answer 1

你需要一个时间旅行装置才能远程实现这一点。早在页面发送到客户端之前， View 就已经在服务器上呈现了。服务器知道视口(viewport)大小的唯一方法是您在请求中发送它。这并不完全理想，因为视口(viewport)大小可能会在事后发生变化。当客户端收到服务器的响应时，JavaScript 会稍后在客户端执行。

解决方案非常简单 - 只需向客户端提供所有可用路径并让它选择要使用的图像大小。

现在 <img>标签可以通过 srcset and sizes attributes 进行响应。这是来自 MDN 优秀教程 responsive images 的示例。 :

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset定义以逗号分隔的源列表和 sizes定义选择使用什么尺寸的媒体规则。

快速而肮脏的 Rails 转换将是:

<%= img_tag('elva-fairy-800w',
  srcset: ["480w", "800w"].map {|s| image_path('elva-fairy-' + s) " #{s}" }.join(', ')
  sizes: "(max-width: 600px) 480px, 800px",
  alt: "Elva dressed as a fairy"
)%>