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

Question

我有一些媒体查询对我来说不能正常工作，基本上下面的 css 应该在桌面上显示一些元素，在移动设备上显示一些元素。

例如，在手机/平板电脑上隐藏一些“悬停”元素，但让它们在桌面设备上可见。

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

在 CSS4 中，我们将能够使用“指针”功能更轻松地做到这一点：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

基本上你的媒体是错误的，看看最小宽度和最大宽度，这样做

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

}