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

Question

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

查询：

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

视口：

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

问题

iPad 将显示小屏幕（悬停菜单），因为宽度为 1024 像素。平板电脑和手机（或触摸设备）应该只显示移动菜单，无论宽度如何，因为触摸设备无法处理 :hover.

解决方案：

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

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

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

CSS (device-max-width) - 好吧这似乎是解决方案，但我担心当我有 (device-max-width: 768px), (device-min-width: 768px) 连同我的普通桌面查询 (min-width:1024px) and (max-width: 1200px) 和 (min-width: 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*/
}

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

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

Media queries mobile menu and normal menu

css

media-queries

responsive-design