仅在移动设备上显示内容 [英] Display content only on mobile devices

问题描述

最近开始使用媒体查询，由于某种我不知道的原因，这不起作用吗?

been working with media queries recently and for some reason unknown to me this doesn't work?

想法是仅在移动设备上显示内容. IE手机和平板电脑.任何和所有建议都将受到欢迎.希望我不是一个白痴，没有明显的东西.

The idea is to only display the content on mobile devices. IE phones and tablets. Any and all advice would be welcome. Hopefully I'm not being a total idiot and missing something obvious.

下面是代码:

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

推荐答案

基本上，手机和平板电脑的视口尺寸属于(max-width:991px)的媒体查询范围，因此您可以通过这种方式更新代码.

Basically the viewport dimension for mobile phones and tablets fall under media query of (max-width: 991px), so you can update your code this way.

@media (max-width: 991px) { 
   .mobileShow {display: block;}
}

但是，某些平板电脑的尺寸为1024px宽，因此，如果您也要包含它们，则可以使用此代码.

However, some tablets have dimensions of 1024px width, so if you want to include them as well, you can use this code.

@media (max-width: 1024px) { 
   .mobileShow {display: block;}
}

这篇关于仅在移动设备上显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！