css - 仅在移动设备上显示内容

Question

最近一直在处理媒体查询，但出于某种我不知道的原因，这不起作用？

想法是只在移动设备上显示内容。 IE 手机和平板电脑。欢迎任何和所有建议。希望我不是一个彻头彻尾的白痴并且错过了一些明显的东西。

代码如下:

 .mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }

<div class="mobileShow">
  <a> Apply now</a>
</div>

Answer 1

请检查并调整您的屏幕，您将根据您的要求获得结果和更改宽度

.mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 


  @media only screen and (max-width: 600px) {
    .mobileShow {display: inline;}
}

<div class="mobileShow">
  <a> Apply now</a>
</div>