针对触摸设备优化网站 [英] Optimize website for touch devices

问题描述

在iPhone / iPad / Android等触摸设备上，用手指敲击一个小按钮可能很困难。没有跨浏览器的方式来检测我知道的CSS媒体查询的触摸设备。所以我检查浏览器是否支持javascript touch事件。 到目前为止，其他浏览器尚未支持它们，但最新的Google Chrome浏览器开发频道启用触摸事件（即使是非触摸设备）。我怀疑其他浏览器制造商会跟随，因为带触摸屏的笔记本电脑正在进行。 更新：这是Chrome中的一个错误，因此现在JavaScript检测再次运行

。

这是我使用的测试：

  function isTouchDevice（）{
 returnontouchstart问题是，这只会测试浏览器是否支持触摸事件，因此，不是设备。
 
 
 
有没有人知道给予触摸设备更好的用户体验的正确[tm]方式？除了嗅探用户代理。
 
 
 
 Mozilla有一个触摸设备的媒体查询。但是我还没有在任何其他浏览器中看到它：
  https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled  
 
 
 
更新：我想避免使用移动/触摸设备的单独页面/网站。解决方案必须检测触摸设备与JavaScript的对象检测或类似，或包括自定义touch-CSS没有用户代理嗅探！ 我问的主要原因是，确保今天不可能，在我联系css3工作组之前。因此，如果您无法按照问题中的要求，请不要回答;）
解决方案
这听起来像我想要有一个触摸屏友好的选项，以涵盖以下场景：
 
 
 iPhone类设备：小屏幕， / li> 
 
小屏幕，无触摸（您没有提及这一屏）
 
 
大屏幕， b $ b 
启用触摸屏的大屏幕，如iPad，带触摸屏的笔记本电脑/ pcs。
 
 
和2，你可能需要一个单独的网站或一个CSS文件，消除了大量的不必要的内容，使事情更大，更容易阅读/导航。如果你关心case＃2，那么只要页面上的链接/按钮是键盘可导航的，那么情况1和2是等效的。
 
 
 
对于情况3，你有您的正常网站。对于情况4，它听起来像你想要可点击的东西更大或更容易接触。如果不可能简单地为所有用户提供更大的一切，一个替换的样式表可以为您提供触摸友好的布局更改。
 
 
 
最简单的事情是提供指向该网站某处的触摸屏版本的链接。对于知名的触摸设备，如iPad，您可以嗅探用户代理，并将触摸样式表设置为默认。但是我会考虑把它作为每个人的默认值。如果你的设计看起来不错的iPad，它应该看起来可以接受在任何笔记本上好。如果您添加了适当的：hover 或 mouseover ，那么您的鼠标用户具有不那么突出的点击技巧将很乐意找到更大的点击目标code>效果，让用户知道可点击的东西。
 
 
 
我知道你说你不想嗅探用户代理。但我认为，在这个时候浏览器支持的状态是太多的流量，担心正确的方式做到这一点。浏览器最终会提供您需要的信息，但您可能会发现这些信息是无处不在的。
 
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 comming. 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 ;)
解决方案
It sounds to me like you want to have a touch-screen-friendly option, to cover the following scenarios:

iPhone-like devices: small screen, touch only
Small screens, no touch (you didn't mention this one)
Large screens, no touch (i.e. conventional computers)
Touch-screen-enabled large screens such as iPad, notebooks/pcs with touch screens.
For case 1 and 2 you will probably need a separate site or a CSS file that eliminates lots of unnecessary content and makes things larger and easier to read/navigate.  If you care about case #2 then as long as the links/buttons on the page are keyboard-navigable then case 1 and 2 are equivalent.

For case 3 you have your normal website.  For case 4 it sounds like you want clickable things to be bigger or easier to touch.  If it's not possible to simply make everything bigger for all users, an alternate style-sheet can provide you with the touch-friendly layout changes.

The easiest thing to do is provide a link to the touch-screen-version of the site somewhere on the page.  For well-known touch devices such as iPad you can sniff the user agent and set the touch stylesheet as the default.  However I'd consider making this the default for everyone; if your design looks good on the iPad it should look acceptably good on any notebook.  Your mouse users with less-than-stellar clicking skills will be pleased to find bigger click targets, especially if you add appropriate :hover or mouseover effects to let users know that things are clickable.

I know you said you don't want to sniff user-agents.  But I'd contend that at this time the state of browser support for this is in too much flux to worry about the "Correct" way to do it.  Browsers will eventually provide the information that you need, but you will probably find that it will be years before this information is ubiquitous.

                        
这篇关于针对触摸设备优化网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！