用于 rails 条件的 Javascript 输出

Question

以下javascript返回浏览器的视口：

<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>

如何在视图文件中的 rails 条件中调用width或innerWidth，假设要根据初始视口宽度生成image_tag：

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

Answer 1

您需要一个时间旅行设备才能远程实现。视图早在页面发送到客户端之前就已呈现在服务器上。服务器知道视口大小的唯一方法是您在请求中发送它。这并不完全理想，因为视口大小可能会在事后发生变化。javascript 在客户端从服务器获得响应时稍后在客户端执行。

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

如今，<img>标签可以通过srcset和sizes属性进行响应。这是MDN关于响应式图像的优秀教程中的一个例子：

<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定义选择使用大小的媒体规则。

快速而肮脏的轨道转换将是：

<%= 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"
)%>