如何针对触摸设备优化网站

在 iPhone/iPad/Android 等触摸设备上，用手指敲击小按钮可能很困难。据我所知，没有跨浏览器的方法可以通过 CSS 媒体查询来检测触摸设备。所以我检查浏览器是否支持 Javascript 触摸事件。 到目前为止，其他浏览器尚不支持它们，但开发频道上最新的 Google Chrome启用触摸事件 http://code.google.com/p/chromium/issues/detail?id=36415（即使对于非触摸设备）。我怀疑其他浏览器制造商也会效仿，因为带有触摸屏的笔记本电脑即将到来。更新：这是 Chrome 中的一个错误，所以现在 JavaScript 检测再次起作用.

这是我使用的测试：

function isTouchDevice() {
    return "ontouchstart" in window;
}

问题是，这仅测试浏览器是否支持触摸事件，而不是设备。

有谁知道为触摸设备提供更好的用户体验的正确方法？除了嗅探用户代理之外。

Mozilla 有针对触摸设备的媒体查询。但我在其他浏览器中没有看到类似的东西：https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

更新：我想避免为移动/触摸设备使用单独的页面/网站。该解决方案必须通过 JavaScript 中的对象检测或类似功能来检测触摸设备，或者包含自定义触摸 CSS，而无需用户代理嗅探！我问的主要原因是在联系 css3 工作组之前确保今天不可能。因此，如果您不能遵循问题中的要求，请不要回答；）

在我看来，您希望有一个适合触摸屏的选项，以涵盖以下场景：

1. 类似 iPhone 的设备：小屏幕，仅限触摸
2. 小屏幕，无触摸（你没有提到这一点）
3. 大屏幕，无触摸（即传统计算机）
4. 支持触摸屏的大屏幕，例如iPad、带触摸屏的笔记本/电脑。

对于情况 1 和 2，您可能需要一个单独的站点或 CSS 文件来消除大量不必要的内容并使内容更大且更易于阅读/导航。如果您关心情况 #2，那么只要页面上的链接/按钮可通过键盘导航，则情况 1 和情况 2 是等效的。

对于情况 3，您有正常的网站。对于情况 4，听起来您希望可点击的东西更大或更容易触摸。如果不可能简单地将所有内容放大以供所有用户使用，则替代样式表可以为您提供触摸友好的布局更改。

最简单的方法是在页面上的某个位置提供指向该网站触摸屏版本的链接。对于众所周知的触摸设备（例如 iPad），您可以嗅探用户代理并将触摸样式表设置为默认值。不过我会考虑将其设为每个人的默认值；如果您的设计在 iPad 上看起来不错，那么它在任何笔记本电脑上也应该看起来不错。点击技能不太出色的鼠标用户会很高兴找到更大的点击目标，特别是如果您添加了适当的:hover or mouseover让用户知道事物是可点击的效果。

我知道你说过你不想嗅探用户代理。但我认为，目前浏览器对此的支持状态变化太大，无需担心“正确”的实现方式。浏览器最终会提供您需要的信息，但您可能会发现这些信息要过很多年才能普及。