优化触摸设备的网站
在像iPhone / iPad / Android这样的触控设备上，用手指点击小button可能很困难。 没有跨浏览器的方式来检测我所知道的CSS媒体查询的触摸设备。 所以我检查浏览器是否支持JavaScript的触摸事件。 到目前为止，其他浏览器还不支持它们，但最新的Google Chrome on dev channel 启用了触摸事件 （即使是非触摸设备）。 我怀疑其他浏览器制造商将会跟随，因为带有触摸屏的笔记本电脑正在来临 。 更新：这是一个Chrome中的错误，所以现在JavaScript检测再次工作 。
这是我使用的testing：
function isTouchDevice() { return "ontouchstart" in window; } 问题是，这只会testing浏览器是否支持触摸事件，而不是设备。
有谁知道给予触摸设备更好的用户体验的正确的方式吗？ 除了嗅探用户代理。
Mozilla有一个针对触摸设备的媒体查询。 但是在其他任何浏览器中我都没有看到类似的东西： https ： //developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled
更新：我想避免使用移动/触摸设备的单独的页面/网站。 该解决scheme必须使用对象检测或类似的JavaScript来检测触摸设备，或者包含自定义触摸CSS，而无需用户代理嗅探！ 我问的主要原因是为了确保在联系css3工作组之前，今天是不可能的 。 所以请不要回答，如果你不能按照问题的要求;）
这听起来像你想要有一个触摸屏友好的选项，涵盖以下情况：
- iPhone般的设备：小屏幕，只有触摸
- 小屏幕，没有触摸（你没有提到这一点）
- 大屏幕，没有触摸（即传统电脑）
- 支持触摸屏的大屏幕，如iPad，带触摸屏的笔记本电脑/个人电脑。
对于案例1和案例2，您可能需要一个单独的网站或CSS文件，以消除大量不必要的内容，使事情变得更大，更容易阅读/导航。 如果你关心第二种情况，那么只要页面上的链接/button是键盘可导航的，则情况1和2是等同的。
对于情况3你有你的正常网站。 对于情况4，听起来好像你想让可点击的东西更大或更容易触摸。 如果不可能简单地为所有用户做更大的事情，那么备用样式表可以为您提供触摸友好的布局更改。
最简单的事情就是提供一个链接到页面某处的触摸屏版本的网站。 对于知名的触摸设备，如iPad，您可以嗅探用户代理，并将触摸样式表设置为默认值。 不过，我认为这是每个人的默认设置; 如果你的devise在iPad上看起来不错，那么在任何笔记本电脑上都应该看起来不错。 您的鼠标用户使用低于恒星的点击技能将很高兴find更大的点击目标，特别是如果您添加适当的:hover或mouseover效果，让用户知道事情是可点击的。
我知道你说你不想嗅探用户代理。 但是我认为，在这个时候，浏览器支持这种状态是不可避免地担心“正确”的方式。 浏览器最终会提供您所需要的信息，但您可能会发现，这些信息无处不在，还需要几年的时间。
好消息！ CSS4 Media Queries的编辑草稿包含了一个新的媒体function“ 指针 ”。
“精细”指向系统的典型示例是鼠标，触控板或触笔式触摸屏。 基于手指的触摸屏将被认定为“粗糙”。
/* 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; } }
也可以从JavaScripttesting媒体查询：
var isCoarsePointer = (window.matchMedia && matchMedia("(pointer: coarse)").matches);
2月11日更新。 2013在Windows 8最新版本的Chrome（版本24+）上启动应用程序并显示触摸事件时检测触摸硬件。 不幸的是，如果“pointer：coarse”返回false，则无法知道是因为指针媒体查询没有实现还是因为有一个精细的指针。 WebKit 还没有实现 “指针：好”，所以我们也不能检查。
更新9月26日。 2012在iOS6上的Safari和Android 4.1.1上的Chrome上testing过，现在还没有。 '指针'和'hover'media-queries 在WebKit 5月30日降落 。 根据用户代理，Safari从4月25日起使用WebKit分支536.26 ，Android上的Chrome使用甚至更早（535.19）。 不确定来自用户代理string的WebKit分支是可信的，但是我的testing页也不能检测指针媒体查询。 5月份的实现只实现触摸设备的指针媒体查询，所以指针：好的不适用于带鼠标的设备。
我不知道像Mozilla这样的标准化媒体查询能否自行解决这个问题。 就像其中一个Chromium开发人员在讨论中说的那样，浏览器中触摸事件支持的存在并不意味着触摸事件可以或者将会触发，或者即使它们触发，用户也只想通过触摸input进行交互。 同样，设备中触摸input支持的存在并不意味着用户将使用该input方法 – 可能该设备支持鼠标，键盘和触摸input，并且用户偏好鼠标或三种inputtypes的某种组合。
我同意Chromium开发者支持触摸事件不是浏览器中的错误。 一个好的浏览器应该支持触摸事件，因为它可能安装在支持触摸input的设备上。 这是网站开发者的错，他采取了事件支持意味着用户将通过触摸互动。
看来我们需要知道两件事情：（1）设备上支持的所有inputtypes是什么（2）浏览器中支持的所有事件types是什么
因为我们现在还不知道＃1，所以我喜欢用quirksmode的PPK提出的一种方法。 他在这里谈论它： http : //www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4
基本上，听触摸事件和鼠标事件，当它们发生时，相应地设置UI。 显然这对开发人员是有限制的。 我不认为这是一个有效的方法来解决链接大小的问题，因为你不想等待交互来改变UI。 整个观点是在任何交互发生之前呈现不同的UI（更大/更小的链接）。
我希望你提出你的build议，并将其包含在CSS3中。 在此之前，尽pipe我很难说，用户代理嗅探看起来是最好的方法。
ps希望希望有人来到这里，certificate我错了
谷歌浏览器有一个命令行开关来启用触摸事件 。 默认情况下禁用。 所以，直到他们再次为所有人（希望他们不会），这是可能的检测触摸与JavaScript的帮助下，就像我在问题中所描述的。 。
2010年3月3日更新 ： 2010年 5月25日，这实际上进入稳定版本:(不知道这是一个错误或没有。
已经在w3c邮件列表上讨论过这个问题，但是我怀疑什么事会很快发生。 http://lists.w3.org/Archives/Public/www-style/2010May/0411.html他们可能会在11月份的TPAC会议上讨论这个问题。;
更新sep 30 2010 ：据说固定在Chrome 6中。没有时间降级到稳定还没有validation。 由于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现在正在开发触摸事件规范 ，但多多lessless拒绝隐藏没有触摸硬件的terminal的触摸事件。 所以不要指望触摸事件检测能够长时间工作。
更新2012年6月6日 ：W3C的CSS4媒体查询（编辑草案）规范有一些非常有趣的事情。 看到我对此的单独答案 。
不，没有这样的事情。 CSS具有屏幕大小选项，这将允许您优化布局，但仅此而已。 也有media="handheld"但也不适用于您的要求。
function检测可能使用JavaScript，但是，不同的设备有不同的事件。 PPK（quirksmode.org后面的那个人）正在做大量的工作来检查每个移动/手持设备的javascript是否可能，并且这certificate这些设备似乎没有什么标准，但是这个STILL并不适用于你要求触摸笔记本电脑设备。
（老实说，我不知道为什么你关心一个还没有出来的设备，一旦到了这里就可以实际操作，而且可以testing它）
PPK在移动浏览器和触摸事件方面的工作将为您节省时间。 看看这里
苹果公司只为iPhone OS FWIW 定义了TouchEvents
不是一个完整的解决scheme，但你可能只想彻底避免任何小button。 虽然小button在触摸设备上更具可用性问题，但即使是大屏幕和鼠标，它们也总是很难使用。
如果你只是注意使用适当的大button，它们之间有足够的空间，每个人都会受益。 另外，它会迫使你不要用太多的小button来混淆你的界面:-)。
尝试使用表格，并使一个完整的单元格成为一个链接…我在我的网站上工作…迄今为止工作不好…但你可能会find一种方法…在这种方式，没有需要超载您的网站与JavaScript和function检测…你可以给它一个固定大小的相对大小instread …这样，您的网站可以在iphone中查看在桌面…想想这个想法…任何消化都是好事…
请参阅http://crbug.com/136119以获得对添加指针的支持：在Chrome中处于良好状态。; 实际上可以检测是否支持pointer：coarse（区分未设置和不支持） – 只需自己创build媒体查询，然后在javascript中testing是否正确parsing。
例如，今天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"
您不会对触摸检测进行任何控制，即使您已经执行逻辑步骤来确定用户正在尝试触摸的是复杂的还是最好由设备自己处理的。
您最好的办法是创build一个移动版本的网站或一个替代的样式表，当你检测到一个移动设备的Javascript。
如果你使用PHP，这是一个很好的解决scheme：
http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/
您可以通过嗅探浏览器请求细节来检测浏览器是否是来自服务器端的电话，如果是，则显示替代/额外样式表/ js / html
