仅在较小的屏幕上显示图像 [英] Display image only on smaller screens

问题描述

有人可以帮我修改下面的代码，只在移动视图中显示图片。现在，它总是可见的。

 < style type =text / javascript> 
 .icon-xyz 
 {float：left;宽度：22px;光标：指针;背景：无;} 
 
 @media仅屏幕和（最大设备宽度：568px）和（最小设备宽度：320px）和（方向：纵向）
 {.icon-xyz {float：left; width：22px; background：none; cursor：pointer; padding：0 13px！important;}} 
 
< / style> 
  

以下是添加图片的脚本：

 $（$ document $。$> $（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）; 
} 
} 
}）; b 
 
 
 $ b 
 nofollow> https://jsfiddle.net/ad8bc8tv/1/  
解决方案
由于您使用 max-device-width 和 min-device-width 您将无法在桌面上测试此媒体查询浏览器，因为它只会在符合这些参数的设备上执行。
 
 
 
这可能是它看起来不起作用的一个原因。
 
 
 
要在桌面环境中进行测试，请使用 max-width 和 min-width 代替，因为它们与浏览器窗口的大小相关，而不是设备的屏幕大小。
 
 
 
实际上，用他们的话来说，Google    强烈建议使用 *  -  device-width 媒体查询，理由是与传统浏览器报告和适应性有关（更多细节）。
 
 
就解决方案而言，这里有一个CSS方法可以工作为你： 
 
 
 
 
 
  .icon-xyz {display：none;} @ media只有屏幕和（最小宽度：320px）和（最大宽度：568px）和（方向：纵向）{.icon-xyz {display：inline; }  
 
 < img class =icon-xyz src =http://i.imgur.com/60PVLis.pngwidth =100height =100alt =>  

jsFiddle

Can somebody help me modify the below code to display image only in mobile view. Right now, it is always visible.

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

Following is the script to add image :

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

解决方案

Since you're using max-device-width and min-device-width you won't be able to test this media query on your desktop browser, as it will only execute on devices that match those parameters.

That may be one reason it appears not to work.

For testing in a desktop environment try using max-width and min-width instead, as these relate to the size of the browser window not the screen size of the device.

In fact, Google, in their words, strongly discourages use of *-device-width media queries for reasons relating to legacy browser reporting and adaptability (more details).

In terms of a solution, here's one CSS method that may work for you:

.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="">

jsFiddle

这篇关于仅在较小的屏幕上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！