我目前正在处理一个类似的问题。

我马上想到了两个主要的选择:(1)用户字符串检查，或者(2)使用不同的URL维护单独的移动页面，让用户选择对他们更好的。

如果您能够使用互联网磁带语言(如PHP或Ruby)，您可以检查请求页面的设备的用户字符串，并简单地提供相同的内容，但使用<link rel="mobile.css" />而不是常规样式。

用户字符串包含浏览器、渲染器、操作系统等标识信息。你可以决定哪些设备是“触控”的，哪些是非触控的。您可以在某个地方找到这些信息，并将其映射到您的系统中。

A. If you're allowed to ignore old browsers, you just have to add a single rule to the normal, non-mobile css, namely: EDIT: Erk. After doing some experimentation, I discovered the below rule also disables the ability to follow links in webkit-browsers in addition to just causing aesthetic effects to be disabled - see http://jsfiddle.net/3nkcdeao/ As such, you'll have to be a bit more selective as to how you modify rules for the mobile case than what I show here, but it may be a helpful starting point:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

作为附带说明，在父元素上禁用指针事件，然后在子元素上显式启用它们，当前会导致在父元素上的任何悬停效果在子元素进入:hover时再次激活。 参见http://jsfiddle.net/38Lookhp/5/

B.如果你支持传统的web渲染器，你将不得不做更多的工作，删除任何在:hover期间设置特殊样式的规则。为了节省每个人的时间，你可能只需要在你的标准样式表上运行一个自动复制+ seding命令来创建移动版本。这将允许您只编写/更新标准代码，并删除任何使用:hover用于页面移动版本的样式规则。

(I)或者，简单地让你的用户知道除了你的website.com之外，你还有一个m.website.com用于移动设备。虽然子域名是最常见的方法，但您也可以对给定URL进行其他可预测的修改，以允许移动用户访问修改后的页面。在这个阶段，您希望确保他们不必每次导航到站点的另一部分时都修改URL。

在这里，您可能只需要向样式表添加一两个额外的规则，或者使用sed或类似的实用程序强制执行稍微复杂一些的操作。它可能是最容易应用的:不应用于你的样式规则，如div:not(.disruptive):hover{…其中，你可以添加class="disruptive"到使用js或服务器语言对移动用户做讨厌的事情的元素中，而不是破坏CSS。

(II) You can actually combine the first two and (if you suspect a user has wandered to the wrong version of a page) you can suggest that they switch into/out of the mobile-type display, or simply have a link somewhere which allows users to flop back and forth. As already-stated, @media queries might also be something to look use in determining what's being used to visit. (III) If you're up for a jQuery solution once you know what devices are "touch" and which aren't, you might find CSS hover not being ignored on touch-screen devices helpful.

悬停CSS媒体功能来拯救!仅使用CSS，当设备没有悬停功能时，您可以覆盖样式。

下面的演示由现代触摸设备支持。

/* hover query styles */ a { color: red; font-size: 3em; } a:hover { color: blue; } @media (hover: none) { a:link, a:visited { color: blue; text-decoration: none; border: 0.1em solid currentColor; padding: 0 0.1em; } } /* used to show if demo browser has hover capabilities */ .detection:before { content: 'UNKNOWN'; color: red; } @media(hover) { .detection:before { content: 'YES'; color: green; } } @media (hover: none) { .detection:before { content: 'NO'; } } <p>Hoverable pointer detected: <span class="detection"></span></p> <h3>Experiences between device hover capabilities</h3> <p>If the device has a hover capability, the link below:</p> <ul> <li>should be red</li> <li>should be blue when hovered</li> </ul> <p>If the device does not have a hover capability, the link below:</p> <ul> <li>should always be blue</li> <li>should be surrounded by a blue border</li> </ul> <p><a href="https://www.google.com">Link</a></p>

注意:请记住，由于Surface PC的主要输入(功能)是鼠标，它最终将是一个蓝色链接，即使它是一个分离的(平板电脑)屏幕。浏览器将(应该)总是默认使用最精确的输入功能。

根据Jason的回答，我们只能用纯css媒体查询来解决不支持悬停的设备。我们也可以只处理支持悬停的设备，就像moogal在类似问题中的回答一样 @media not all and(悬停:none)。看起来很奇怪，但很有效。

为了更容易使用，我做了一个Sass mixin:

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

更新2019-05-15:我推荐Medium的这篇文章，它介绍了我们可以使用CSS瞄准的所有不同设备。基本上，它是这些媒体规则的混合，针对特定目标将它们结合起来:

@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

针对特定目标的示例:

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}

我喜欢mixin，这就是我如何使用我的hover mixin只针对支持它的设备:

@mixin on-hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
}

button {
    @include on-hover {
        color: blue;
    }
}

你可以使用Modernizr JS(也见这个StackOverflow的答案)，或自定义JS函数:

function is_touch_device() {
 return 'ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if ( is_touch_device() ) {
  $('html').addClass('touch');
} else {
  $('html').addClass('no-touch');
} 

来检测浏览器对touch事件的支持，然后分配一个常规的CSS属性，用html遍历元素。无接触类，像这样:

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}

我目前正在处理一个类似的问题。

我马上想到了两个主要的选择:(1)用户字符串检查，或者(2)使用不同的URL维护单独的移动页面，让用户选择对他们更好的。

如果您能够使用互联网磁带语言(如PHP或Ruby)，您可以检查请求页面的设备的用户字符串，并简单地提供相同的内容，但使用<link rel="mobile.css" />而不是常规样式。

用户字符串包含浏览器、渲染器、操作系统等标识信息。你可以决定哪些设备是“触控”的，哪些是非触控的。您可以在某个地方找到这些信息，并将其映射到您的系统中。

A. If you're allowed to ignore old browsers, you just have to add a single rule to the normal, non-mobile css, namely: EDIT: Erk. After doing some experimentation, I discovered the below rule also disables the ability to follow links in webkit-browsers in addition to just causing aesthetic effects to be disabled - see http://jsfiddle.net/3nkcdeao/ As such, you'll have to be a bit more selective as to how you modify rules for the mobile case than what I show here, but it may be a helpful starting point:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

作为附带说明，在父元素上禁用指针事件，然后在子元素上显式启用它们，当前会导致在父元素上的任何悬停效果在子元素进入:hover时再次激活。 参见http://jsfiddle.net/38Lookhp/5/

B.如果你支持传统的web渲染器，你将不得不做更多的工作，删除任何在:hover期间设置特殊样式的规则。为了节省每个人的时间，你可能只需要在你的标准样式表上运行一个自动复制+ seding命令来创建移动版本。这将允许您只编写/更新标准代码，并删除任何使用:hover用于页面移动版本的样式规则。

(I)或者，简单地让你的用户知道除了你的website.com之外，你还有一个m.website.com用于移动设备。虽然子域名是最常见的方法，但您也可以对给定URL进行其他可预测的修改，以允许移动用户访问修改后的页面。在这个阶段，您希望确保他们不必每次导航到站点的另一部分时都修改URL。

在这里，您可能只需要向样式表添加一两个额外的规则，或者使用sed或类似的实用程序强制执行稍微复杂一些的操作。它可能是最容易应用的:不应用于你的样式规则，如div:not(.disruptive):hover{…其中，你可以添加class="disruptive"到使用js或服务器语言对移动用户做讨厌的事情的元素中，而不是破坏CSS。

(II) You can actually combine the first two and (if you suspect a user has wandered to the wrong version of a page) you can suggest that they switch into/out of the mobile-type display, or simply have a link somewhere which allows users to flop back and forth. As already-stated, @media queries might also be something to look use in determining what's being used to visit. (III) If you're up for a jQuery solution once you know what devices are "touch" and which aren't, you might find CSS hover not being ignored on touch-screen devices helpful.

使用带有媒体指针的媒体悬停将帮助您解决此问题。

@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */

}