Javascript 如何为触摸设备优化网站

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

这是我使用的测试：

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

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

有人知道给触摸设备提供更好用户体验的正确[tm]方法吗？而不是嗅探用户代理

Mozilla有一个触摸设备的媒体查询。但我在其他任何浏览器中都没有看到类似的内容：

---

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

您将无法控制检测触摸，即使您执行了逻辑步骤来确定用户试图触摸的内容，但这很复杂，最好由设备本身来处理

---

您最好的选择是创建一个移动版本的网站或一个备用样式表，当您检测到带有Javascript的移动设备时会加载该样式表。

我觉得您需要一个触摸屏友好的选项，以涵盖以下场景：

类似iPhone的设备：小屏幕，仅限触摸

小屏幕，不可触摸（您没有提到这一个）

大屏幕，无触摸（即传统计算机）

支持触摸屏的大屏幕，如iPad、带触摸屏的笔记本电脑/PC

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

对于案例3，您拥有正常的网站。对于案例4，听起来您希望可点击的东西更大或更容易触摸。若不可能简单地让所有用户都拥有更大的空间，那个么另一个样式表可以为您提供触摸友好的布局更改

最简单的方法是在页面的某个地方提供一个指向该站点触摸屏版本的链接。对于iPad等知名触摸设备，您可以嗅探用户代理并将触摸样式表设置为默认值。不过，我会考虑让这对每个人来说都是默认的；如果你的设计在iPad上看起来不错，那么在任何笔记本上都应该可以接受。您的鼠标用户如果没有一流的点击技能，会很高兴找到更大的点击目标，特别是如果您添加适当的

：hover

或

鼠标悬停

效果，让用户知道事情是可以点击的

---

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

如果您使用的是PHP，这是一个很好的解决方案：

---

您可以通过嗅探浏览器请求的详细信息从服务器端检测浏览器是否是电话，如果是，则显示可选/额外样式表/js/html

不，没有这样的事情。 CSS有屏幕大小选项，这将允许您优化布局，但仅此而已。 还有

media=“掌上电脑”

，但这也不适用于您的要求

功能检测可能使用javascript工作，但是，对于不同的设备，存在不同事件的问题。PPK（quirksmode.org背后的人）正在做大量的工作，检查每个移动/手持设备可以使用哪些javascript，并证明这些设备似乎没有什么标准，但这仍然不适用于您对触摸式笔记本设备的要求。
（老实说，我不知道你为什么会担心一个还没有上市的设备，务实一点，一旦它出现了，你就可以测试它）

PPK在移动浏览器和触摸事件方面的工作将为您节省数小时。看看吧

苹果有FWIW

谷歌Chrome有一个。默认情况下禁用。因此，除非他们再次为每个人启用它们（希望他们不会），否则就有可能在javascript的帮助下检测触摸，就像我在问题中描述的那样

2010年6月3日更新：这实际上在2010年5月25日进入了稳定版本：（不知道这是不是一个错误）

我已经在w3c邮件列表上讨论过这个问题，但我怀疑很快会发生什么。 他们可能会在11月的TPAC期间讨论这个问题

2010年9月30日更新：Chrome 6应该已经修复。还没有时间降级到稳定状态以进行验证。因为Chrome自动升级，这个问题应该已经解决了：）

如果您正在考虑使用媒体查询，请阅读以下内容： 及

2011年5月16日更新：W3C目前正在开发一个新的应用程序，但要隐藏没有触摸硬件的终端的触摸事件。因此，不要期望触摸事件检测能够工作很长时间

---

2012年6月6日更新：W3C CSS4媒体查询（编辑器草案）规范有一些非常有趣的内容。关于这一点，请参见我的。

不是一个完整的解决方案，但是

/* Make radio buttons and check boxes larger if we
   have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

> document.styleSheets[0].rules[5].media[0]
"(pointer: coarse)"

> document.styleSheets[0].rules[8].media[0]
"not all"