Question

在像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工作组之前，确保今天不可能。如果你不能按照问题的要求请不要回答;）

Answer 1

听起来我觉得你想要一个触摸屏友好的选项，以涵盖以下场景：

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

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

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

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

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

Answer 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“指针：很好”，所以我们也无法检查。

9月26日更新。 2012 在iOS6上的Safari和Android 4.1.1上的Chrome中测试过，它还没有。 5月30日'指针'和'悬停'媒体查询landed in WebKit。根据User-Agent，Safari从4月25日起使用WebKit分支536.26，Android上的Chrome使用甚至更旧的（535.19）。不确定用户代理字符串的WebKit分支是否可信，但我的test page也无法检测指针媒体查询。 implementation from May仅实现触摸设备的指针媒体查询，因此指针：fine不适用于带鼠标的设备。

Answer 3

Google Chrome浏览器有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年第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年6月16日更新：W3C正在使用Touch Events specification，但more or less refused隐藏没有触摸硬件的终端的触摸事件。所以不要指望触摸事件检测能够长时间工作。

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

Answer 4

我不知道像Mozilla这样的标准化媒体查询是否会自行解决问题。就像Chromium开发人员在您所讨论的讨论中所说的那样，浏览器中触摸事件支持的存在并不意味着触摸事件可以或将要触发，或者即使他们这样做，用户也只想通过触摸输入进行交互。同样，设备中存在触摸输入支持并不意味着用户将使用该输入方法 - 可能设备支持鼠标，键盘和触摸输入，并且用户更喜欢鼠标或三种输入类型的某种组合。

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

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

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

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

我希望你提出你的建议并将其纳入CSS3。在那之前，尽管我很难说，用户代理嗅探看起来是最好的方法。

P.S。我希望希望有人来这里证明我错了

Answer 5

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

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

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

Answer 6

Apple有TouchEvents defined only for iPhone OS FWIW

Answer 7

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

如果你只注意使用适当大的按钮，它们之间有足够的空间，每个人都会受益。另外，它会强迫你不要用太多的小按钮弄乱你的界面： - ）。

Answer 8

尝试使用表格并将完整单元格作为链接... 我正在我的网站上工作... 到目前为止，它运作不佳...... 但你可能会找到一种方法...... 通过这种方式，无需使用javascript和功能检测重载您的网站... 你可以给它一个固定大小的相对大小的instread ... 通过这种方式，您可以在桌面上查看您的网站，如在iPhone中查看... 想想这个想法...... 任何消化都是apreciated ......

Answer 9

有关添加指针的支持，请参阅http://crbug.com/136119：Chrome正常。实际上可以检测是否支持指针：粗糙（区分未设置与不支持） - 只需自己创建媒体查询并在javascript中测试它是否正确解析。

例如，今天Chrome中的“@media（指针：粗略）”显示：

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

但不支持的虚假值如“@media（指针：其他）”不会：

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

Answer 10

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

您最好的选择是创建网站的移动版本或在使用Javascript检测到移动设备时加载的备用样式表。

Answer 11

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

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

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

优化触摸设备的网站

11 个答案: