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，因为这些与浏览器窗口的大小有关，而与设备的屏幕大小无关。

事实上，谷歌用他们的话说， 强烈反对 使用*-device-width媒体查询，原因与传统浏览器报告和适应性有关（{{3 }}）。

就解决方案而言，这里有一个可能适合您的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="">

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

1 个答案:

more details