仅在较小的屏幕上显示图像

Question

谁能帮我修改下面的代码以仅在移动视图中显示图像。现在，它始终可见。

<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/

Answer 1

由于您使用的是 max-device-width 和 min-device-width，您将无法在桌面浏览器上测试此媒体查询，因为它只会在 设备上执行 匹配那些参数。

这可能是它似乎不起作用的原因之一。

要在桌面环境中进行测试，请尝试使用 max-width 和 min-width，因为它们与浏览器的大小有关 window 而不是设备的屏幕大小。

事实上，Google，用他们的话说，强烈反对使用*-device-width媒体查询与旧版浏览器报告和适应性相关的原因 (more details)。

就解决方案而言，这里有一个 CSS 可能适合您的方法：

.icon-xyz {
  display: none;
}
@media only screen and (min-width: 320px) and (max-width: 568px) and 
   (orientation: portrait) { .icon-xyz { display: inline; } }

<img class="icon-xyz" src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">

仅在较小的屏幕上显示图像

Display image only on smaller screens

html

javascript

css

media-queries

jsFiddle