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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您只需使用@media查询即可在平板电脑和移动设备下进行管理。媒体宽度应符合您的要求。

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

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

Answer 4

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

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

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

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

仅在移动设备上显示内容

4 个答案: