限制较小屏幕上的迭代

Question

我正在迭代几个用户对象并将其个人资料头像网址打印为图像：

<% @users.each do |user| %>
 <%= image_tag(user.profile.avatar.url, class: 'circle') %>
<% end %>

尼斯。如果我有100+，我需要根据最终用户的屏幕大小限制图像，即iPad：

<% @users.take(8).each do |user| %>
 <%= image_tag(user.profile.avatar.url, class: 'circle') %>
<% end %>

我需要知道专业人士如何做到这一点。我有一个listens for css changes：

的javascript

// run test on initial page load
checkSize();

// run test on resize of the window
$(window).resize(checkSize);

function checkSize(){
 if ($("#demo").css("display") == "none" ){
  // ajax to get A (users.take(8).each ...)
 } else {
  // ajax to get B (initial view)
 }
});

在我称之为ajax的地方，我想使用渲染但渲染不能使用：

$("#some-id").html("<%= escape_javascript(render partial: 'foo/a') %>"); // or foo/b

我省略了路由器和控制器的显示。 ajax调用.js.erb文件。

这感觉这是关于如何显示这些头像图像的UI / UX决定的问题：它们是否应该在较小的屏幕上显示或不显示。但如果必须，如何限制较小屏幕上的迭代？