优化触摸设备的网站

Question

在像iPhone/iPad/Android这样的触摸设备上,用手指敲击一个小按钮很困难.没有跨浏览器方式来检测我所知道的CSS媒体查询的触摸设备.所以我检查浏览器是否支持javascript触摸事件.到目前为止,其他浏览器还没有支持它们,但是开发者频道上的最新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

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

1. 类似iPhone的设备:小屏幕,仅触摸
2. 小屏幕,没有触摸(你没有提到这个)
3. 大屏幕,无触摸(即传统计算机)
4. 支持触摸屏的大屏幕,如iPad,带触摸屏的笔记本电脑/个人电脑.

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

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

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

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

Answer 2

好消息!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月的实现只实现触摸设备的指针媒体查询,因此指针:fine不适用于带鼠标的设备.