根据屏幕尺寸显示右图

Question

这可能是一个简单的问题,但经过一些研究后我没有找到任何有效的解决方案.

我使用carrierwave生成上传图像的多个版本.每张图片都有不同屏幕尺寸的特定尺寸.例如(在我的上传器中)我有

version :xl 

适用于大于1200像素的屏幕.

如何根据客户端屏幕大小使用rails显示特定图像？

我知道有宝石响应图像,但我不能使用大小.
响应式图像的主题目前相当广泛,没有人似乎有相同的答案,尤其是使用javascript和html5.如何使用rails(即使它是服务器端)？

Answer 1

以下是几种方法:

1. 加载包含存储为数据属性的各种图像大小的所有路径的页面,使用js获取屏幕宽度,然后将图像标记粘贴到您想要的正确路径.代码可能看起来像(未经过测试,我一直在使用coffeescript,因此可能缺少详细信息):

   # ruby command line
   $ @image.mobile_asset_url
   => "path/to/mobile/image"
   $ @image.desktop_asset_url
   => "path/to/desktop/image"
   
   
   # html.erb
   <img src="" class="placeholder" data-mobile-url=<%=@image.mobile_asset_url%> data-desktop-url=<%=@image.desktop_asset_url%>></div>
   
   # javascript
   el = $('.placeholder')
   data = el.data();
   width = $(window).width();
   mobile_breakpoint = 480;
   
   if (width <= mobile_breakpoint) {
     url = data.mobileUrl;
   } else {
     url = data.desktopUrl;
   }
   
   el.attr('src', url)
   

2. 服务器端测试不是针对屏幕宽度,而是针对像浏览器这样的宝石的浏览器类型,并为iOS8等移动特定浏览器加载较小的图像.像这样的逻辑在装饰器中可能是最好的.我对Ruby更熟练,所以一个例子可能看起来像(这段代码没有经过测试):

   # user_decorator.rb, from the Draper gem
   class UserDecorator
   
     def profile_url
       if mobile_browser?
          "path/to/small/image"
       else
          "path/to/large/image"
       end
     end
   
     private
   
     def mobile_browser?
       browser.ios || browser.android || ...
     end
   
   end