Question

我的网站有4个媒体查询，一个用于移动（流媒体），一个用于平板电脑（720px），小屏幕（940px）和大屏幕（1140px）。手机和平板电脑将显示移动菜单，小屏幕和大屏幕将有一个正常菜单，将显示悬停的子菜单。

查询：

< 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将显示小屏幕（悬停菜单），因为宽度为1024px。平板电脑和手机（或触摸设备）只应显示移动菜单，无论宽度如何，因为触摸设备无法处理: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) 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*/
}

在浏览器开始实施之前，您会遇到令人讨厌的变通方法，例如浏览器嗅探。

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

1 个答案: