如何为触摸设备优化网站

如何为触摸设备优化网站

在我看来，您希望拥有一个适合触摸屏的选项，以涵盖以下情形：

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

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

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

最简单的方法是在页面上的某个位置提供指向网站的触摸屏版本的链接。对于诸如iPad之类的知名触摸设备，您可以嗅探用户代理并将触摸样式表设置为默认样式。但是我会考虑将其设置为所有人的默认设置。如果您的设计在iPad上看起来不错，那么在任何笔记本上看起来都可以接受。您的鼠标用户具有不太出色的点击技能，他们会很高兴找到更大的点击目标，特别是如果您添加适当的效果

:hover

或

mouseover

效果让用户知道事物是可点击的。

我知道您说过您不想嗅探用户代理。但我认为，此时浏览器对此的支持状态太过复杂，无法担心采用“正确”的方式来做到这一点。浏览器最终将提供您需要的信息，但是您可能会发现，要普及这些信息还需要很多年。