使用actionmailer时，如何根据设备类型或屏幕大小调整图片大小？

<img src="https://example.com/image.jpg" width="300" height="200">

<% if request.user_agent =~ /iPhone/ %>
  <img src="https://example.com/image.jpg" width="200" height="150">
<% elsif request.user_agent =~ /Android/ %>
  <img src="https://example.com/image.jpg" width="250" height="180">
<% else %>
  <img src="https://example.com/image.jpg" width="300" height="200">
<% end %>

<script>
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  
  if (screenWidth < 600) {
    document.getElementById("image").style.width = "200px";
    document.getElementById("image").style.height = "150px";
  } else if (screenWidth < 1024) {
    document.getElementById("image").style.width = "250px";
    document.getElementById("image").style.height = "180px";
  } else {
    document.getElementById("image").style.width = "300px";
    document.getElementById("image").style.height = "200px";
  }
</script>

<img id="image" src="https://example.com/image.jpg">