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>

Как может width или innerWidth быть вызывается в состоянии rails в файле представления, предполагая, что нужно сгенерировать 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"
)%>