如何为触摸设备优化网站

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

这是我使用的测试：

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

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

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

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

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

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

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

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

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

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

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

好消息！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还没有实现“ pointer：fine”，所以我们也不能检查它。

9月26日更新。2012 在iOS6上的Safari和Android 4.1.1上的Chrome中进行了测试，但尚不存在。“指针”和“悬停”媒体查询于5月30日登陆WebKit。根据User-Agent的说法，Safari从4月25日开始使用WebKit分支536.26，Android上的Chrome使用甚至更老的版本（535.19）。不确定是否可以信任用户代理字符串中的WebKit分支，但是我的测试页也无法检测指针媒体查询。May的实现仅实现了针对触摸设备的指针媒体查询，因此，pointer：fine对于使用鼠标的设备不起作用。

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

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

看来我们需要了解两件事：（1）设备上所有受支持的输入类型是什么（2）浏览器中所有受支持的事件类型是什么

既然我们现在还不知道＃1，我喜欢Prk提出的一种quirksmode方法。他在这里谈论：http : //www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

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

希望您提出您的建议并将其包含在CSS3中。在此之前，尽我的最大努力，用户代理嗅探似乎是最好的方法。

ps我希望希望有人能来证明我错了

Google Chrome浏览器具有用于启用触摸事件的命令行开关。默认禁用。因此，直到他们再次为所有人启用它们（希望它们不会），才有可能像我在问题中所述的那样借助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/档案/2010/09/more_about_medi.html

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

2012年6月6日更新：W3C CSS4媒体查询（编辑者草案）规范非常有趣。请参阅我对此的单独答复。

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

使用javascript可以进行功能检测，但是对于不同的设备，存在不同事件的问题。PPK（quirksmode.org的幕后负责人）正在做大量工作，检查每种移动/手持设备都可以使用哪种javascript，并且事实证明这些设备似乎都不是标准的，但是此STILL不适用于您的触摸笔记本电脑设备的要求。
（老实说，我不知道您为什么担心尚未推出的设备，请务实并为它担心，只要它在这里就可以测试）

PPK在移动浏览器和触摸事件上的工作将为您节省时间。检查出来这里

Apple已为iPhone OS FWIW定义了TouchEvents

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

如果您只是注意使用适当的大按钮，并且它们之间有足够的空间，那么每个人都会从中受益。另外，它将迫使您不要用太多的小按钮（-）弄乱您的界面。

尝试使用表格并让一个完整的单元格成为链接...我正在我的网站上进行操作...到目前为止还不能很好...但是您可能会找到一种方法...需要使用javascript和功能检测来使您的网站超载...您可以为它提供固定大小的相对大小的信息...这样，您的网站就可以像在iphone上一样在桌面上查看...考虑一下这个想法。。。

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

您将无法对检测触摸进行任何控制，即使您执行了逻辑步骤来弄清楚用户尝试触摸的确切内容也是复杂的，并且设备本身可以最好地处理。

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

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

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

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