如何优化网站以适应触摸设备

Question

如何优化网站以适应触摸设备

67

在像iPhone/iPad/Android这样的触摸设备上，用手指点击小按钮可能很困难。据我所知，没有跨浏览器的方式可以使用CSS媒体查询检测触摸设备。因此，我会检查浏览器是否支持JavaScript触摸事件。直到现在，其他浏览器还没有支持它们，但是最新的Google Chrome在dev频道启用了触摸事件（即使对于非触摸设备）。我怀疑其他浏览器制造商也会跟进，因为带有触摸屏幕的笔记本电脑正在兴起。更新：这是Chrome中的一个错误，所以现在JavaScript检测又可以正常工作了。

这是我使用的测试：

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

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

有没有人知道如何以正确的方式提供触摸设备更好的用户体验？除了嗅探用户代理之外。

Mozilla有一个针对触摸设备的媒体查询。但我在其他任何浏览器中都没有看到类似的东西： https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled 更新：我想避免为移动/触摸设备使用单独的页面/站点。解决方案必须通过JavaScript进行对象检测或类似方法来检测触摸设备，或者包含自定义触摸CSS而无需嗅探用户代理！我提问的主要原因是确保今天还不能实现，然后再联系css3工作组。所以如果您无法遵循问题中的要求，请不要回答;)

- gregers

1

Chrome还没有确定他们将如何处理触摸事件。讨论请参见：http://code.google.com/p/chromium/issues/detail?id=36415 - gregers

1

你想知道浏览器是否支持触摸事件的原因是因为用户很难触摸到小按钮，对吧？所以，我猜你只是想为这些触摸设备放大UI元素？ - David Murdoch

4

需要翻译的内容：Something else to keep in mind is hover events struggle on touch devices - this can makes some sites with hover menus almost impossible to navigate。需要翻译的内容：在使用触摸设备时，需要注意悬停事件可能会出现问题 - 这可能会使一些带有悬停菜单的网站几乎无法导航。 - cjk

在这成为支持媒体查询的情况之前，通过嗅探来实现这一点将是对http://www.modernizr.com/的极好补充。 - Brendan Heywood

5

我在这里写了一些关于检测技术的内容：http://modernizr.github.com/Modernizr/touch.html - Paul Irish

显示剩余4条评论

11个回答

16

好消息！CSS4 Media Queries 的编辑草案已经包含了一个新的媒体特性 'pointer'。

典型的 '精细' 指针系统的例子是鼠标、触摸板或基于笔尖的触摸屏。基于手指的触摸屏将被归类为 '粗略'。

/* 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;
    }
}

还可以通过JavaScript测试媒体查询：

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

2013年2月11日更新 在Windows 8上，Chrome的最新版本（24+）在启动应用程序时检测到触摸硬件并公开触摸事件。不幸的是，如果“pointer：coarse”返回false，则无法知道它是因为指针媒体查询未实现还是因为存在精细指针。 WebKit 尚未实现 “pointer：fine”，因此我们也无法检查它。

2012年9月26日更新 在iOS6的Safari和Android 4.1.1上的Chrome中进行了测试，但尚未出现。'pointer'和'hover'媒体查询已经落入WebKit于5月30日。根据用户代理，Safari使用4月25日的WebKit分支536.26，而Android上的Chrome使用甚至更旧的分支（535.19）。不确定是否可以信任来自用户代理字符串的WebKit分支，但我的测试页面也无法检测到指针媒体查询。从五月份开始实施的实现仅为触摸设备实现了指针媒体查询，因此对于带有鼠标的设备，指针：fine将无法工作。

- gregers

真是个好消息！你的技巧正是我需要识别触摸设备的。非常感谢！ - Bastes

似乎在使用带有触控笔的平板电脑上会失败。 - gman

3

谷歌浏览器有一个命令行开关，用于启用触摸事件。默认情况下禁用。因此，在他们再次为所有人启用它们之前（希望他们不会这样做），可以使用我在问题中描述的javascript来检测触摸。

更新jun 3 2010：~~实际上已经在2010年5月25日的稳定版本中解决了这个问题:(不知道是否是一个错误。~~

已在w3c邮件列表上讨论了这个问题，但我怀疑很快不会发生任何事情。http://lists.w3.org/Archives/Public/www-style/2010May/0411.html 他们可能会在11月的TPAC期间讨论这个问题。

更新sep 30 2010：据说在Chrome 6中已经修复。还没有时间降级到稳定版本进行验证。由于Chrome会自动升级，因此这个问题应该已经解决了 :)

如果你正在考虑使用媒体查询，请阅读以下内容: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ 和 http://www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

更新于2011年5月16日: W3C正在制定触摸事件规范, 但更多或更少地拒绝为没有触摸硬件的终端隐藏触摸事件。因此，不要指望触摸事件检测能够长期工作。

2012年6月6日更新: W3C CSS4 Media Queries（编辑草案）规范有一些非常有趣的内容。请参见我的单独回答。

- gregers

3

我不确定像Mozilla这样的标准化媒体查询是否能单独解决问题。正如你链接中的讨论中，其中一位Chromium开发人员所说，浏览器中支持触摸事件并不意味着触摸事件会或将被触发，甚至如果它们确实被触发，用户也可能不只想通过触摸输入进行交互。同样，设备支持触摸输入并不意味着用户将使用该输入方式——也许该设备支持鼠标、键盘和触摸输入，用户更喜欢鼠标或三种输入类型的某种组合。

我同意Chromium开发人员的观点，支持触摸事件并不是浏览器的错误。一个好的浏览器应该支持触摸事件，因为它可能安装在支持触摸输入的设备上。网站开发人员的错误在于，他认为事件支持意味着用户将通过触摸进行交互。

看来我们需要知道两件事：（1）设备上支持的所有输入类型（2）浏览器中支持的所有事件类型

由于我们目前不知道＃1，因此PPK of quirksmode提出了一种方法，我很喜欢。他在这里谈到了它：http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

基本上，监听触摸事件和鼠标事件，当它们发生时，相应地设置UI。显然，这对开发人员是有限制的。我认为这不是解决链接大小问题的有效方法，因为您不希望等待交互来改变UI。整个重点是在任何交互发生之前呈现不同的UI（更大/更小的链接）。

我希望您提出您的建议，并将其包含在CSS3中。在那之前，尽管让我痛苦，但用户代理嗅探似乎是最好的方法。

p.s. 我希望有人来这里并证明我错了

- Michael Hixson

非常感谢您的好评。如果您的设备不支持触摸，为什么您的浏览器需要公开触摸事件呢？我有点喜欢PPK的解决方案，但我不确定那个解决方案对用户是否友好。 - gregers

浏览器能否知道它安装在支持触摸的硬件上？任何操作系统是否会通知浏览器用户插入了触摸输入设备？我不知道。PPK的解决方案是唯一一个这些都不重要的方案。我明白你所说的用户友好性 - 它只有在UI或行为是交互结果时才有效。对于像滑块条这样的东西，这个方法非常完美。我认为YouTube也很好地处理了他们的评论（将鼠标悬停在评论上会显示控件）。对于你的大/小链接问题，这种方法效果不佳，并且对于纯HTML/CSS页面没有任何作用。 - Michael Hixson

2

没有这样的东西。 CSS 有屏幕大小选项，可以让您优化布局，但仅此而已。还有 media="handheld"，但这也不适用于您的要求。

使用JavaScript进行功能检测可能有效，但是不同设备的事件存在问题。 PPK（quirksmode.org的创始人）正在大量工作，检查每个移动/手持设备可能的JavaScript，并且证明这些设备似乎没有标准，但这仍然不适用于您对触摸笔记本设备的要求。（老实说，我不知道为什么您关心尚未发布的设备，请务实考虑并在测试后再担心它）

PPK关于移动浏览器和触摸事件的工作将节省您数小时。在这里查看：这里。

- Dave Gregory

是的，PPK做得很好，但它并不能解决我和许多其他开发人员的需求。我只是想确保在联系负责CSS3的人之前，这是不可能的。因为我相信这应该是媒体查询的一部分。 - gregers

明白了。看起来工作组仍在考虑候选人建议。请告诉我们结果如何。 :D - Dave Gregory

0

请参考http://crbug.com/136119以了解如何在Chrome中添加pointer:fine指针支持。实际上可以检测是否支持pointer:coarse（区分未设置和不支持） - 只需自己创建媒体查询并测试javascript是否已正确解析。

例如，今天在Chrome中“@media (pointer:coarse)”显示如下：

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

但是不支持的虚假值，比如“@media (pointer:other)”则不行：

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

- Rick Byers

0

苹果公司只为 iPhone 操作系统定义了 TouchEvents，顺带一提。

- Divya Manian

0

这不是一个完整的解决方案，但你可能想要避免使用任何小按钮。虽然小按钮在触摸设备上更容易出现可用性问题，但即使在大屏幕和鼠标上使用它们也很困难。

如果你只关注使用足够大的按钮并在它们之间留有足够的空间，每个人都会受益。此外，它将迫使你不要在界面上拥挤太多小按钮 :-).

- sleske

0

尝试使用表格，并将整个单元格作为链接... 我正在我的网站上处理这个问题... 目前还不太顺利... 但你可能会找到一种方法... 通过这种方式，无需用JavaScript和功能检测来过载您的网站... 您可以给它一个相对大小而不是固定大小... 这样，您的网站在桌面上的显示效果就像在iPhone上一样... 思考一下这个想法... 欢迎任何建议...

- Ismael Miguel

1

表格如何提高触摸设备的使用体验？如果您想要相对大小，有很多更好的解决方法。"HTML表格应仅用于以表格形式显示数据" - http://www.webdesignfromscratch.com/html-css/html-tables/ - gregers

-3

你将无法对触摸事件进行精确控制，即使你能够进行控制，也需要复杂的逻辑步骤来确定用户的具体触摸意图，最好由设备本身处理。

你最好的选择是创建一个移动版本的网站或者一个当你检测到移动设备时加载的替代样式表。可以通过Javascript来实现这个功能。

- Josh K

1

我觉得你误解了我的问题。没有办法为触摸设备包含替代样式表。如果您知道如何做，请告诉我！您可以使用媒体查询来包含小屏幕的样式表，但这对于iPad或带有触摸屏的笔记本电脑有什么帮助呢？触摸不等于移动。 - gregers

我假设有一个触摸敏感设备列表和内置浏览器，例如Safari。如果被识别出来，可以包含额外的CSS文件。触摸可能不同于移动，但实际上触摸灵敏度主要取决于设备和校准，而不是你自己。 - Josh K

@gregers 我相信他所指的是一个完全独立的网站，当你检测到移动设备时，你会重定向到该网站。不同的标记，不同的样式，不同的脚本，但后端相同。维基百科就是这样做的，还有很多其他网站也是这样。 - Josh Stodola

2

只需看看新的Android手机和很快就会有触摸屏的笔记本电脑的速度。对我来说，进行用户代理嗅探不是一个选项。如果今天浏览器中不可能实现这一点，那么我们需要向浏览器开发人员提出这个问题！设备制造商可以校准任意多次。但我仍然会努力用手指点击正确的链接/按钮。触摸设备需要更大的按钮/链接，并且开发人员需要一个好的方法来为它们提供！ - gregers

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Shiny and New 安宇 · Accepted Answer

听起来你希望有一个触摸屏友好的选项，以涵盖以下情况:

类似iPhone设备: 小屏幕，仅支持触控
小屏幕，没有触控 (你没有提到这一点)
大屏幕，没有触控 (即传统电脑)
启用触摸屏的大屏幕设备，如iPad、具有触摸屏的笔记本电脑/个人电脑。

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

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

最简单的方法是在页面的某个位置提供触摸屏版本的链接。对于诸如iPad等知名的触摸设备，您可以嗅探用户代理并将触摸样式表设置为默认值。但是，我建议将其作为所有人的默认选项; 如果您的设计在iPad上看起来不错，那么它应该在任何笔记本电脑上看起来还算不错。您的使用鼠标的用户如果找到更大的点击目标，则会感到高兴，尤其是如果添加了适当的 :hover 或 mouseover效果，以让用户知道某些东西是可点击的。

我知道你说你不想嗅探用户代理。但是，我认为此时浏览器对此的支持状态太过不稳定，无需担心“正确”的处理方式。浏览器最终将提供您需要的信息，但是您可能会发现在这些信息普及之前需要几年时间。