рендеринг оператора доходности в зависимости от видового экрана?

Question

У меня есть следующий HTML-разметка:

<div id="site-wrapper" class="show-for-large-only"> 
    <div id="site-canvas"> 
    <%= yield %> 
    </div> 
</div> 

для мобильных устройств я хочу дополнительный раздел, как:

<div class="show-for-small-only"> 
    <%= yield %> 
</div> 
<div id="site-wrapper" class="show-for-large-only"> 
    <div id="site-canvas"> 
    <%= yield %> 
    </div> 
</div> 

С помощью CSS я могу скрыть дивы в зависимости от видового экрана пользователя.

Есть ли способ избежать отображения содержания доходности дважды, то есть только для отображения соответствующего div?

Answer 1

Сервер не знает о размерах экрана клиента и доступном видовом экране. Если вы не укажете его в строке запроса или отдельном запросе ajax, я думаю, что это невозможно определить.

На вашем месте я бы сделал дополнительный запрос ajax для получения желаемого мобильного контента.

EDIT:

В контроллере, вы можете определить агент пользователя по HTTP заголовков, используя request object. Я бы написал для этого помощника. Сохраните результат в переменной экземпляра, например @is_mobile_agent, и, на ваш взгляд, вам понадобится дополнительный оператор if до yield. Что-то вроде

yield if @is_mobile_agent