Может ли кто-нибудь помочь мне изменить приведенный ниже код для отображения изображения только в мобильном представлении. Прямо сейчас это всегда видно.

<style type="text/javascript">
      .icon-xyz
      {float: left; width: 22px;cursor: pointer;background: none;}

      @media only screen and (max-device-width: 568px) and (min-device-width: 320px) and (orientation: portrait)
     {.icon-xyz {float: left;width: 22px;background: none;cursor: pointer;padding: 0 13px !important;}}

</style>

Ниже приведен скрипт для добавления изображения:

$(document).ready(function() {
      var loc = window.location;
      if (loc.toString().toUpperCase().indexOf('/home/') > -1)
      {
      $("#icon-xyz").css("background", "url(/images/Icon1.png) no-repeat");
      if($.cookie("lang") == "es")
      {
      $("#icon-xyz").css("background", "url(/images/Icon2.png) no-repeat");
      }
      }
});

https://jsfiddle.net/ad8bc8tv/1/