仅在移动设备上显示内容答案

【问题标题】：Display content only on mobile devices仅在移动设备上显示内容
【发布时间】：2020-09-18 19:32:12
【问题描述】：

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

这个想法是只在移动设备上显示内容。 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>

【问题讨论】：

标签： css responsive-design media-queries

【解决方案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>

【讨论】：

【解决方案2】：

基本上手机和平板的视口尺寸属于（最大宽度：991px）的媒体查询，因此您可以通过这种方式更新代码。

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

但是，某些平板电脑的尺寸为 1024 像素宽度，因此如果您也想包含它们，可以使用此代码。

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

【讨论】：

【解决方案3】：

.mobileShow {display: none;} 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .mobileShow {display: block;}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .mobileShow {display: block;}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
   .mobileShow {display: block;}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
   .mobileShow {display: block;}
}
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
   .mobileShow {display: block;}
}
<div class="mobileShow">
  <a> Apply now</a>
</div>

【讨论】：

【解决方案4】：

您可以简单地使用@media查询在平板电脑和移动设备下进行管理。媒体宽度应根据您的要求。

.mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media (max-width: 768px) { 
      .mobileShow {display: inline;}
  }

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

【讨论】：