Question

我有一些媒体查询对我来说没有正常工作，基本上下面的css应该会显示桌面上的一些元素和手机上的一些元素。

例如，隐藏一些＆＃34;悬停＆＃34;移动设备/平板电脑上的元素，但在桌面设备上可以看到它们。

@media (max-width: 1024px){
    .desktop_only {
       display: none !important;
    }
}
@media (min-width: 1025px){
    .mobile_only {
       display: none !important;
    }
}

在CSS4中，我们将能够使用＆＃39;指针＆＃39;更容易地做到这一点。功能：https://drafts.csswg.org/mediaqueries/#pointer但我无法使用它，因为这是未来，尚未实施。

我尝试使用：

<script>
    document.documentElement.className += 
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

我也尝试过使用Modernizer，它也应该添加触摸/不触摸

使用：

@media (max-width: 1024px){
    .touch .desktop_only {
       display: none !important;
    }
}
@media (min-width: 1025px){
    .no-touch .mobile_only {
       display: none !important;
    }
}

但它不起作用，它没有正确隐藏元素。我还试过没有@media (xxxx: 102x)部分，但这也没有用。我还尝试过触摸和不触摸，以防我误解了。

我无法使用css：-moz-system-metric(touch-enabled)，因为许多浏览器都不支持

不确定我如何使用http://detectmobilebrowsers.com/来做我想要的事情

任何人都有任何线索我做错了什么？

Answer 1

基本上你的媒体是错误的，请参阅min-width和max-width，执行此操作

.mobile-only {
  display: block;
}

@media (min-width: 1024px){
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
  .desktop-only:hover {
    color:#000;
  }
}

不要使用下划线

编辑 - 这是我的

/* ===============
 DISPLAY SETTINGS
 =============== */

@media all and (max-width: 43.688em) { /* 489px */

    .mobile-is-hidden { display: none; }

}

@media all and (min-width: 43.688em) and (max-width: 61.188em) { /* 699px to 979px */

    .pad-is-hidden { display: none; }

}

@media all and (min-width: 61.250em) { /* 980px */

    .desk-is-hidden { display: none; }

}

媒体查询不适用于大型移动设备（平板电脑）

1 个答案: