优化触摸设备的网站
在像iPhone / iPad / Android这样的触控设备上，用手指点击小按钮可能很困难。 没有跨浏览器的方式来检测我知道的CSS媒体查询的触摸设备。 所以我检查浏览器是否支持javascript touch事件。 到目前为止，其他浏览器尚未支持它们，但最新的Google Chrome开发通道启用了触摸事件（即使是非触摸设备）。 而且我怀疑其他浏览器制造商会跟进，因为带有触摸屏的笔记本电脑正在上线。 更新：这是Chrome中的一个错误，所以现在JavaScript检测再次起作用 。
这是我使用的测试：
function isTouchDevice() {
return "ontouchstart" in window;
}
问题是，这只会测试浏览器是否支持触摸事件，而不是设备。
有没有人知道给触摸设备提供更好的用户体验的正确方式？ 除了嗅探用户代理。
Mozilla有一个针对触摸设备的媒体查询。 但在其他浏览器中我没有看到任何类似的内容：https：//developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled
更新：我想避免使用移动/触摸设备的单独页面/网站。 该解决方案必须使用对象检测或JavaScript类似的方式来检测触摸设备，或者在没有用户代理嗅探的情况下包含自定义触摸CSS！ 我问的主要原因是为了确保在我联系css3工作组之前，今天是不可能的 。 所以如果你不能按照问题的要求，请不要回答;）
这听起来像你想要有一个触摸屏友好的选项，以涵盖以下情况：
对于案例1和案例2，您可能需要单独的网站或CSS文件，以消除大量不必要的内容，并使事情变得更大，更容易阅读/导航。 如果你关心第二种情况，那么只要页面上的链接/按钮是键盘可导航的，那么情况1和2是等同的。
对于情况3，你有你的正常网站。 对于案例4来说，您想让可点击的事物变得更大或更容易触摸。 如果不可能简单地为所有用户制作更大的内容，另一种样式表可以为您提供触控友好的布局更改。
最简单的做法是提供一个链接到页面某处的触摸屏版本的网站。 对于iPad等知名触摸设备，您可以嗅探用户代理并将触摸样式表设置为默认设置。 不过，我会考虑把它作为每个人的默认设置; 如果你的设计在iPad上看起来不错，它应该在任何笔记本电脑上看起来都可以接受。 具有低于恒星点击技能的鼠标用户会很高兴找到更大的点击目标，尤其是在添加适当的:hover或mouseover效果以让用户知道事情可点击的情况下。
我知道你说你不想嗅探用户代理。 但我认为，目前浏览器对此的支持状态太过于担心“正确”的方式。 浏览器最终会提供您需要的信息，但是您可能会发现，这些信息无处不在，还需要几年的时间。
好消息！ CSS4 Media Queries的编辑草案包含了一个新的媒体功能“指针”。
“精细”指向系统的典型示例是鼠标，触控板或触笔式触摸屏。 基于手指的触摸屏将被视为“粗糙”。
/* 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尚未实现“指针：罚款”，所以我们也无法检查。
更新9月26日。 2012在iOS6上的Safari和Android 4.1.1上的Chrome上测试过，现在还没有。 '指针'和'悬停'媒体查询于5月30日登陆WebKit。 根据用户代理，Safari从4月25日开始使用WebKit分支536.26，Android上的Chrome使用甚至更早（535.19）。 不确定来自用户代理字符串的WebKit分支是可信的，但是我的测试页也无法检测到指针媒体查询。 5月份的实现只实现触摸设备的指针媒体查询，所以指针：罚款不适用于带有鼠标的设备。
我不知道像Mozilla这样的标准化媒体查询是否会自行解决问题。 就像其中一位Chromium开发人员在您关联的讨论中说的那样，浏览器中触摸事件支持的存在并不意味着触摸事件可以或者将会触发，或者即使它们触发，用户也只想通过触摸输入进行交互。 同样，设备中存在触摸输入支持并不意味着用户将使用该输入方法 - 可能该设备支持鼠标，键盘和触摸输入，用户更喜欢鼠标或三种输入类型的某种组合。
我同意Chromium开发人员支持触摸事件不是浏览器中的错误。 一个好的浏览器应该支持触摸事件，因为它可能安装在支持触摸输入的设备上。 这是网站开发者的错，他采取了事件支持，意味着用户将通过触摸进行交互。
看起来我们需要知道两件事情：（1）设备上支持的所有输入类型是什么（2）浏览器中支持的所有事件类型是什么
由于我们现在还不知道＃1，所以我喜欢使用quirksmode的PPK提出的一种方法。 他在这里谈论它：http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4
基本上，监听触摸事件和鼠标事件，当它们发生时，相应地设置UI。 显然这限制了开发者。 我不认为这是对链接大小问题的有效方法，因为您不想等待交互来更改UI。 整个观点是在任何交互发生之前呈现不同的用户界面（更大/更小的链接）。
我希望你能提出你的建议，并将其包含在CSS3中。 在那之前，尽管我很难说，但用户代理嗅探看起来是最好的方法。
ps我希望希望有人来到这里并证明我错了
链接地址: http://www.djcxy.com/p/84027.html