如何为触摸设备优化网站 [英] How to optimize website for touch devices
问题描述
在类似iPhone/iPad/Android的触摸设备上，可能很难用手指按下一个小按钮.据我所知，没有跨浏览器的方法可以通过CSS媒体查询来检测触摸设备.因此，我检查浏览器是否支持Javascript触摸事件. 直到现在，其他浏览器还不支持它们，但是开发者频道已启用触摸事件(即使对于非触摸设备也是如此).而且我怀疑其他浏览器制造商也会紧随其后，因为带有触摸屏的笔记本电脑即将问世. 更新:这是Chrome中的错误，因此现在JavaScript检测可以再次使用.
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.
这是我使用的测试:
function isTouchDevice() {
return "ontouchstart" in window;
}
问题在于，这只会测试浏览器是否支持触摸事件，而不是设备.
The problem is that this only tests if the browser has support for touch events, not the device.
有人知道The Correct [tm]为触摸设备提供更好的用户体验的方法吗?除了嗅探用户代理.
Does anyone know of The Correct[tm] way of giving touch devices better user experience? Other than sniffing user agent.
Mozilla对触摸设备有媒体查询.但是我没有在任何其他浏览器中看到过类似的东西: https://developer.mozilla.org/En/CSS/Media_queries #-moz-touch-enabled
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
更新:我想避免为移动/触摸设备使用单独的页面/站点.该解决方案必须使用对象检测或来自JavaScript的类似检测来检测触摸设备，或者包括自定义的触摸CSS，而无需用户代理嗅探！ 我问的主要原因是要确保在今天无法联系css3工作组之前.因此，如果您不能遵循问题中的要求，请不要回答;)
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的设备:小屏幕，仅触摸
- 小屏幕，无触摸(您没有提及这一点)
- 大屏幕，无触摸(即传统计算机)
- 启用触摸屏的大屏幕，例如iPad，带触摸屏的笔记本/电脑.
对于情况1和2，您可能需要一个单独的站点或一个CSS文件，该文件或文件可以消除许多不必要的内容，并使内容更大且更易于阅读/导航.如果您关心案例2，那么只要页面上的链接/按钮可通过键盘导航，那么案例1和2就是等效的.
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.
对于情况3，您拥有正常的网站.对于情况4，听起来您希望可点击的东西更大或更容易触摸.如果无法简单地将所有内容都扩大为所有用户，则备用样式表可以为您提供触摸友好的布局更改.
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.
最简单的方法是在页面上某个位置提供指向该网站的触摸屏版本的链接.对于诸如iPad之类的知名触摸设备，您可以嗅探用户代理并将触摸样式表设置为默认样式.但是我会考虑将其设置为所有人的默认设置.如果您的设计在iPad上看起来不错，那么在任何笔记本上看起来都可以接受.您的鼠标用户具有不太出色的点击技巧，他们会很高兴找到更大的点击目标，特别是如果您添加适当的:hover或mouseover效果以使用户知道事物是可点击的.
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屋！
