css - 媒体查询移动菜单和普通菜单

Question

我的网站有 4 个媒体查询，一个用于移动设备(流体)，一个用于平板电脑(720 像素)、小屏幕(940 像素)和大屏幕(1140 像素)。手机和平板电脑会显示一个移动菜单，小屏幕和大屏幕会有一个普通菜单，悬停时会显示子菜单。

查询:

< 768px // Mobile 
> 768px and < 1024px // Tablet
> 1024px and < 1200px // Small screens
> 1200px // Big screens  

视口(viewport):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

问题

iPad 将显示小屏幕(悬停菜单)，因为宽度为 1024 像素。平板电脑和手机(或触摸设备)应该只显示移动菜单而不考虑宽度，因为触摸设备无法处理 :hover。

解决方案:

两种底层解决方案都不是我想要的方式。我正在寻找一个纯 CSS 版本来检测移动设备或触摸设备。如果没有 CSS 选项，当然会应用这些解决方案之一。

Modernizr - 它可以检测设备是移动设备还是平板电脑，并且可以检测它是否是触摸设备。缺点是您必须添加一个包，这将导致额外的 http 请求，并且会使网站“变慢”。另一个缺点是当 Javascript 被禁用时它不会工作。

Javascript - 使用 Javascript 检测手机和平板电脑的所有 userAgent。缺点是，如果 Javascript 被禁用，它将无法工作，您必须留意新设备/userAgent

CSS (device-max-width) - 这似乎是解决方案，但我担心当我有一个 (device-max-width: 768px)、(device-min-width: 768px) 以及我的普通桌面查询 (min-width:1024px) 和 (max-width: 1200px) 和 (最小宽度:1200px)

Answer 1

CSS 规范中存在针对您的问题的正确解决方案，但尚未实现: https://drafts.csswg.org/mediaqueries/#hover

@media (hover) {
  /*styles for devices where the user can hover*/
}
@media not (hover) {
  /*styles for devices where the user cannot hover, such as mobiles and tablets*/
}

在浏览器绕过实现它之前，您会遇到浏览器嗅探等令人讨厌的变通方法。