如何为触摸设备优化网站

Question

在iPhone / iPad /
Android等触摸设备上，可能很难用手指按一下小按钮。据我所知，没有跨浏览器的方法可以通过CSS媒体查询来检测触摸设备。因此，我检查浏览器是否支持Javascript触摸事件。
到目前为止，其他浏览器还不支持它们，但是开发人员频道上的最新Google Chrome浏览器
启用了触摸事件（即使对于非触摸设备也是如此）。而且我怀疑其他浏览器制造商也会效仿，因为带有触摸屏的笔记本电脑即将问世 。
更新：这是Chrome中的错误，因此JavaScript检测现在可以再次使用 。

这是我使用的测试：

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

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

有谁知道可以为触摸设备提供更好的用户体验的Correct [tm]方法？除了嗅探用户代理。

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

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

Answer 1

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

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

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

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

最简单的方法是在页面上的某个位置提供指向网站的触摸屏版本的链接。对于诸如iPad之类的知名触摸设备，您可以嗅探用户代理并将触摸样式表设置为默认样式。但是我会考虑将其设置为所有人的默认设置。如果您的设计在iPad上看起来不错，那么在任何笔记本上看起来都可以接受。您的鼠标用户具有不太出色的点击技能，他们会很高兴找到更大的点击目标，特别是如果您添加适当的效果:hover或mouseover效果让用户知道事物是可点击的。

我知道您说过您不想嗅探用户代理。但我认为，此时浏览器对此的支持状态太过复杂，无法担心采用“正确”的方式来做到这一点。浏览器最终将提供您需要的信息，但是您可能会发现，要普及这些信息还需要很多年。