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

Posted 2023-04-13

【中文标题】如何针对触控设备优化网站

【英文标题】：How to optimize website for touch devices

【发布时间】：2011-02-06 03:02:53

【问题描述】：

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

这是我使用的测试：

function isTouchDevice() 
    return "ontouchstart" in window;

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

有谁知道给触摸设备更好的用户体验的正确[tm]方法吗？除了嗅探用户代理。

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

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

【问题讨论】：

Chrome 尚未确定他们将如何处理触摸事件。在这里讨论：code.google.com/p/chromium/issues/detail?id=36415

您想知道浏览器是否有触摸事件的原因是因为用户很难触摸一个小按钮，对吧？那么，我假设您只是想让这些触摸设备的 UI 元素更大？

还有一点需要记住的是，悬停事件在触摸设备上会遇到困难 - 这会使一些带有悬停菜单的网站几乎无法导航

在这成为支持媒体查询之前，嗅探这将是对modernizr.com的一个很好的补充

我在这里写了一些关于检测技术的文章：modernizr.github.com/Modernizr/touch.html

【参考方案1】：

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

类似 iPhone 的设备：小屏幕，仅触控 小屏幕，无触摸（你没提到这个） 大屏幕，无触摸（即传统计算机） 支持触摸屏的大屏幕，例如 iPad、带触摸屏的笔记本电脑/个人电脑。

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

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

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

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

【讨论】：

小屏幕不是问题。问题是触摸设备上的小按钮/链接 - 无论屏幕大小。我知道可以使用用户代理或使用单独的站点进行检测，但这违反了所有最佳实践。 CSS3 不是最终版本，因此我们仍有机会将其作为 CSS3 媒体查询或类似内容的一部分！

我接受了您的回答，因为添加指向触摸版网站 (touch.mydomain.com) 的链接可能是当今的最佳做法。正如您所提到的，还可以使用用户代理检测 一些 触摸设备，并自动重定向它们。希望我们将来能找到更好的方法来做到这一点。

@gregers：我同意有更好的方法会很好。我的回答是为了“今天”做一些“正确的”事情而写的。也许有一天会有更好的方法有人会出现并编辑此答案以使其更正确。 :)

【参考方案2】：

好消息！ 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);

2 月 11 日更新。 2013 在 Windows 8 上，Chrome 的最新版本（版本 24+）在启动应用程序时检测触摸硬件并公开触摸事件。不幸的是，如果“pointer:coarse”返回false，则无法知道是因为没有实现指针媒体查询还是因为有一个很好的指针。 WebKit haven't implemented "pointer:fine" 还没有，所以我们也无法检查。

9 月 26 日更新。 2012 在 ios6 上的 Safari 和 Android 4.1.1 上的 Chrome 中进行了测试，但还没有。 “指针”和“悬停”媒体查询landed in WebKit 5 月 30 日。根据 User-Agent 的说法，Safari 从 4 月 25 日开始使用 WebKit 分支 536.26，Android 上的 Chrome 使用甚至更旧的分支 (535.19)。不确定来自用户代理字符串的 WebKit 分支是否可信，但我的 test page 也无法检测指针媒体查询。 implementation from May 只实现了针对触摸设备的指针媒体查询，因此 pointer: fine 不适用于带有鼠标的设备。

【讨论】：

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

似乎在带有手写笔的平板电脑上会失败

【参考方案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 中。在那之前，尽管我说起来很痛苦，但用户代理嗅探看起来是最好的方法。

附言我希望希望有人来这里证明我错了

【讨论】：

感谢您的精彩评论。如果您的设备没有对触摸的硬件支持，为什么您的浏览器需要公开触摸事件？我有点喜欢 PPK 的解决方案，但我不确定该解决方案对用户的友好程度。

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

【参考方案4】：

谷歌浏览器有一个command line switch for enabling touch events。 默认禁用。因此，直到他们再次为所有人启用它们（希望他们不会），才有可能像我在问题中描述的那样借助 javascript 检测触摸。。

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

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

2010 年 9 月 30 日更新：据说已在 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 现在正在开发 Touch Events specification，但 more or less refused 可以隐藏没有触摸硬件的终端的触摸事件。所以不要指望触摸事件检测能长时间工作。

2012 年 6 月 6 日更新：W3C CSS4 媒体查询（编辑草案）规范有一些非常有趣的东西。请参阅我的separate answer。

【参考方案5】：

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

特征检测可能使用 javascript 工作，但是，不同设备的不同事件存在问题。 PPK（quirksmode.org 背后的人）正在做大量的工作来检查每个移动/手持设备可以使用哪些 javascript，并且证明这些设备似乎没有任何标准，但这仍然不适用于您的对触摸笔记本电脑设备的要求。 （老实说，我不知道您为什么担心尚未推出的设备，请务实并担心它，一旦它在这里，您可以对其进行测试）

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

【讨论】：

是的，PPK 做得很棒，但它并没有解决我和许多其他开发人员的需求。我只是想在联系从事 css3 工作的人之前确定这是不可能的。我相信这应该是媒体查询的一部分。

明白。看起来工作组仍在接受候选人推荐。让我们知道结果如何。 :D

【参考方案6】：

苹果有TouchEvents defined only for iPhone OS FWIW

【参考方案7】：

不是一个完整的解决方案，但您可能只想完全避免使用任何小按钮。虽然小按钮在触摸设备上的可用性问题更多，但它们总是很难使用，即使是大屏幕和鼠标也是如此。

如果您只注意使用适当大的按钮并在它们之间留出足够的空间，那么每个人都会受益。另外，它会迫使你不要用太多的小按钮弄乱你的界面:-)。

【参考方案8】：

尝试使用表格并将完整的单元格作为链接... 我正在我的网站上解决这个问题...... 到目前为止效果不佳... 但你可能会找到一种方法... 这样，无需使用 javascript 和功能检测来超载您的网站... 你可以给它一个固定大小的相对大小... 通过这种方式，您的网站可以在桌面上查看，就像在 iphone 上查看一样... 想想这个想法…… 任何建议都值得赞赏...

【讨论】：

表格如何让触控设备变得更好？如果你想要相对大小，有很多更好的方法可以解决这个问题。 “HTML 表格只能用于以表格形式显示数据” - webdesignfromscratch.com/html-css/html-tables

【参考方案9】：

请参阅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"

【参考方案10】：

您无法控制触摸检测，即使您执行了逻辑步骤来确定用户尝试触摸的确切内容也是复杂的，并且最好由设备本身处理。

最好的办法是创建网站的移动版本或在检测到带有 Javascript 的移动设备时加载的备用样式表。

【讨论】：

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

我假设有一个触摸感应设备和内置浏览器的列表，即 Safari。如果可以识别，请包含一个附加的 CSS 文件。触控可能与移动设备不同，但真正的触控灵敏度主要取决于设备和校准，而不是您。

@gregers 我相信他指的是一个完全独立的网站，当您检测到移动设备时会重定向到该网站。不同的标记，不同的风格，不同的脚本，相同的后端。***这样做，许多其他网站也是如此。

看看新安卓手机的速度，很快就会有触摸屏的笔记本电脑。做用户代理嗅探对我来说不是一个选择。如果这在今天的浏览器中是不可能的，那么我们需要向浏览器开发人员解决这个问题！设备制造商可以根据需要进行校准。我仍然很难用手指点击正确的链接/按钮。触控设备需要更大的按钮/链接，而开发人员需要一种很好的方式来实现这一点！

【参考方案11】：

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

http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

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

【讨论】：

请在回答前阅读问题；）“除了嗅探用户代理”

用户代理嗅探通常是一种有效的解决方案。我不明白为什么 css3 应该植入另一个解决方案 - 那将是多余的

用户代理嗅探不是未来的证据！一条经验法则是永远不要使用用户代理嗅探。它总会回来咬你。但是使用用户代理来支持触摸是不可能的。用户代理字符串仅包含浏览器和操作系统版本。那么你怎么知道它是不是带触摸屏的笔记本电脑呢？仅举几例：联想 S10-3t、宏碁 1420P、惠普 TouchSmart、戴尔 XT2。 Google Chrome 和 Firefox 都在努力支持触控。

特征检测肯定是前进的新方法吗？

用户代理嗅探仅适用于将内容列入黑名单。例如，如果某些浏览器在从 javascript 查询时假装支持某些功能，但支持的 bug 太大而无法在现实世界中使用，则 then 用户代理嗅探可以检测有 bug 的版本。用户代理嗅探不适用于将内容列入白名单，因为未来的用户代理（来自相同或不同的供应商）可能会支持所需的功能，但不会“工作”，因为 UA 未包含在您的白名单中。