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

Question

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

例如，在 mobiles/tablets 上隐藏一些 "hover" 元素，但让它们在桌面设备上可见。

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

在 CSS4 中授予，我们将能够使用 'pointer' 功能更轻松地完成此操作：https://drafts.csswg.org/mediaqueries/#pointer 但我不能使用它，因为那是未来，现在还不行已实施。

我尝试使用：

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

我也尝试过使用 Modernizer，它应该还会添加 touch/no-touch

有：

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

}

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

Media query not applying to large mobile devices (tablets)

css

responsive-design

responsive