如何针对触摸设备优化网站

发布于 2024-08-28 10:13:05 字数 985 浏览 5 评论 0原文

在 iPhone/iPad/Android 等触摸设备上，用手指敲击小按钮可能很困难。据我所知，没有跨浏览器的方法可以通过 CSS 媒体查询来检测触摸设备。所以我检查浏览器是否支持 Javascript 触摸事件。到目前为止，其他浏览器尚不支持它们，但开发频道上的最新 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 工作组之前，确保今天不可能实现这一点。因此，如果您不能遵循问题中的要求，请不要回答；）

原文

On a touch device like iPhone/iPad/Android it can be difficult to hit a small button with your finger. There is no cross-browser way to detect touch devices with CSS media queries that I know of. So I check if the browser has support for Javascript touch events. Until now, other browsers haven't supported them, but the latest Google Chrome on dev channel enabled touch events (even for non touch devices). And I suspect other browser makers will follow, since laptops with touch screens are coming. Update: It was a bug in Chrome, so now the JavaScript detection works again.

This is the test I use:

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

The problem is that this only tests if the browser has support for touch events, not the device.

Does anyone know of The Correct[tm] way of giving touch devices better user experience? Other than sniffing user agent.

Mozilla has a media query for touch devices. But I haven't seen anything like it in any other browser:
https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Update: I want to avoid using a separate page/site for mobile/touch devices. The solution has to detect touch devices with object detection or similar from JavaScript, or include a custom touch-CSS without user agent sniffing! The main reason I asked, was to make sure it's not possible today, before I contact the css3 working group. So please don't answer if you can't follow the requirements in the question ;)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

活泼老夫 2024-09-04 10:13:05

在我看来，您希望有一个触摸屏友好的选项，以涵盖以下场景：

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

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

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

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

我知道你说过你不想嗅探用户代理。但我认为，目前浏览器对此的支持状态变化太大，无需担心“正确”的实现方式。浏览器最终会提供您需要的信息，但您可能会发现这些信息要过很多年才能普及。

回复收藏 0 原文

伊面 2024-09-04 10:13:05

好消息！ CSS4 媒体查询的编辑草案包含了一个新的媒体功能“指针'。

“精细”定点系统的典型示例是鼠标、触控板或基于手写笔的触摸屏。基于手指的触摸屏属于“粗糙”触摸屏。

/* 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 中。根据用户代理，Safari 使用 WebKit 分支 536.26，Android 上的 Chrome 使用甚至更旧的版本 (535.19)。不确定来自用户代理字符串的 WebKit 分支是否可信，但我的测试页无法检测指针媒体查询。
仅5 月份实施实现了触摸设备的指针媒体查询，因此pointer:fine不适用于带有鼠标的设备。

Good news! The editor draft of CSS4 Media Queries have included a new media feature 'pointer'.

Typical examples of a ‘fine’ pointing system are a mouse, a track-pad or a stylus-based touch screen. Finger-based touch screens would qualify as ‘coarse’.

/* 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;
    }
}

It's also possible to test the media query from JavaScript:

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

Updated Feb. 11th. 2013 On Windows 8 recent versions of Chrome (version 24+) detect touch-hardware when launching the application and expose touch events. Unfortunately if "pointer:coarse" returns false, there is no way to know if it's because pointer media queries are not implemented or because there is a fine pointer. WebKit haven't implemented "pointer:fine" yet, so we can't check that either.

Update Sept. 26th. 2012
Tested in Safari on iOS6 and Chrome on Android 4.1.1 and it's not there yet. 'pointer' and 'hover' media-queries landed in WebKit May 30th. According to the User-Agent, Safari uses WebKit branch 536.26 from April 25th, and Chrome on Android uses and even older one (535.19). Not sure WebKit branches from User-Agent strings are to be trusted, but my test page is not able to detect pointer media queries either.
The implementation from May only implements the pointer media query for touch devices, so pointer: fine won't work for devices with a mouse.

回复收藏 0 原文

望笑 2024-09-04 10:13:05

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

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

看来我们需要知道两件事：
(1) 设备支持的输入类型有哪些
(2) 浏览器支持的事件类型有哪些

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

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

我希望您提出您的建议并将其包含在 CSS3 中。在那之前，尽管我很痛苦地说，用户代理嗅探看起来是最好的方法。

ps 我希望希望有人来到这里并证明我错了

回复收藏 0 原文

梦纸 2024-09-04 10:13:05

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/archives/2010 /09/more_about_medi.html

2011 年 5 月 16 日更新：W3C 正在开发触摸事件规范，但是

2012 年 6 月 6 日更新：W3C CSS4 媒体查询（编辑草案）规范有一些非常有趣的内容。请参阅我关于此问题的单独的答案。

回复收藏 0 原文

躲猫猫 2024-09-04 10:13:05

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

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

PPK 在移动浏览器和触摸事件方面的工作将节省你的时间。请查看此处

回复收藏 0 原文

瑶笙 2024-09-04 10:13:05

苹果有仅针对 iPhone 操作系统定义的 TouchEvent FWIW

回复收藏 0 原文

不寐倦长更 2024-09-04 10:13:05

这不是一个完整的解决方案，但您可能只想完全避免使用任何小按钮。虽然小按钮在触摸设备上更多地是一个可用性问题，但它们总是很难使用，即使有大屏幕和大屏幕。老鼠。

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

回复收藏 0 原文

野味少女 2024-09-04 10:13:05

尝试使用表格并将完整的单元格作为链接......
我正在我的网站上做这件事...
到目前为止效果不佳...
但你可能会找到一种方法...
这样，就无需使用 JavaScript 和功能检测来使您的网站超载...
您可以给它一个相对大小而不是固定大小......
这样，您的网站就可以像在 iPhone 中一样在桌面上查看...
想想这个想法...
任何建议表示赞赏...

回复收藏 0 原文

狼性发作 2024-09-04 10:13:05

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

See http://crbug.com/136119 for support for adding pointer:fine in Chrome. It is actually possible to detect whether pointer:coarse is supported (to distinguish unset from not supported) - just create the media query yourself and test in javascript whether it parsed properly.

Eg., today "@media (pointer:coarse)" in Chrome shows up:

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

But unsupported bogus values like "@media (pointer:other)" don't:

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

回复收藏 0 原文

十六岁半 2024-09-04 10:13:05

您无法控制检测触摸，即使您执行了逻辑步骤来弄清楚用户到底试图触摸什么，也是很复杂的，并且最好由设备本身来处理。

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

回复收藏 0 原文

情感失落者 2024-09-04 10:13:05

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

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

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

回复收藏 0 原文

~没有更多了~

关于作者

单身狗的梦

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

如何针对触摸设备优化网站

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如何针对触摸设备优化网站

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。