我们设计的世界正在以相当快的速度变化。 去年的这个时候，移动网络成为热门话题。 我们都在构建适用于手持设备的网站和应用程序的优化版本，并为使它们看起来像本机iPhone应用程序而惊讶。
此后不久，当Android平台开始流行时，我们意识到我们不应该将界面与特定设备紧密地联系在一起。 因为，不是每个人都有iPhone。 将移动站点或应用程序设计为好像属于Apple军队一样，可能会减少我们大多数用户的总体体验。 因此，就像在台式机上一样，我们开始在移动设计中解放自己。
我们用于设备检测的技术已成为非常标准的标准，以至于很少有人质疑它们。 我们要么检测服务器端，然后将用户发送到针对移动设备优化的其他站点，要么我们使用媒体查询来检测屏幕尺寸并相应地调整设计。
但是正如伯特兰·罗素（Bertrand Russell）所说：“在所有事务中，对您早已视为理所当然的事情加一个问号，这是一件健康的事情。”
我在这里告诉您，建立完美的用户体验至少还有一个步骤：触摸检测。
当前检测状态
有两种方法可以控制最佳实践场景，以检测用户是否在移动设备上。 第一个已经存在一段时间了，它是服务器端基于设备的检测。 第二种是使用CSS媒体查询来检测屏幕尺寸。 当然，这两种方法都各有利弊。 那么，让我们看看吧？
检测设备
检测设备可能是针对特定用户的非常有效的方法。 通常是通过拉入User-Agent字符串并仔细阅读某些关键字（例如“ iphone”）来完成的。 这样，您可以知道正在使用哪个设备来查看您的站点或应用程序，并针对每种情况修改您的设计。
好处
在服务器上运行检测脚本肯定有其好处。 无论如何，服务器的100倍中有99倍将比客户端更快，因此，明显的性能优势是，您对返回的数据有更多的控制权。 通常，除非您拥有受控或有针对性的环境，否则很少将其留给有时不存在的技术（例如JavaScript）使用。 另一个优点是，您可以专门针对用户群中的任意数量的设备。 例如，如果您只希望iPhone和Android设备看到优化的设计，则使用此方法很容易实现。
使用PHP提取User-Agent非常容易。 在这里，我们只是为了调试目的而将其回显：
<?php echo $_SERVER['HTTP_USER_AGENT']; ?>
缺点
这种方法的缺点特别是激发了我寻找另一种方法的原因。 在尝试为移动设备进行设计时，理想情况下，您希望将它们全部作为目标并创建灵活且一致的界面。 这就是问题所在。 当使用任何类型的设备检测时，将难以有效扩展。 一段时间后，您会发现自己尝试管理20-30个受支持设备的列表，并且如果该列表中没有设备，则该设备将不会被提取。
您可能遇到的另一个问题是部分User-Agent字符串匹配。 我在构建移动网站时发现了这一点，并注意到Opera出于某种原因选择了我的移动设计。 经过仔细研究，我发现Opera User-Agent字符串包含单词“ Presto”，这是它的呈现引擎。 不幸的是，由于预发布，这导致“ Palm Pre” User-Agent出现问题。 随着可用设备范围的扩大，我认为我们将在服务器端设备检测中看到更多此类问题。
检测屏幕尺寸
当前，屏幕（或窗口）大小检测是通过CSS媒体查询完成的。 这些查询通常直接嵌入在主样式表中（尽管它们可以是单独的），并且可以按需要分成多个屏幕尺寸。 大多数人只能工作两三个。 如果您想了解有关媒体查询的更多信息，请查阅Athan Apart中 Ethan Marcotte的“ 响应式Web设计”文章。
好处
使用媒体查询是一种在较小的屏幕上定位用户的非常快速且轻巧的方法。 这些功能很棒，因为它们不仅适用于移动设备，而且适用于屏幕较小的任何设备，例如上网本。 它们在防止水平滚动方面有很大帮助，更不用说用户在使用较小的浏览器窗口时可能会感到局促，同时仍然呈现出可用的设计。
缺点
尽我们所愿，小屏幕不一定意味着触摸设备。 即使是支持媒体查询的小屏幕也可能不是触摸设备。 因此，尽管该方法对于一般的设计和布局可能效果很好，但基本上无法转移到界面设计中。 只要有一个指向设备，某些用户交互（例如拖放）就可以在具有小屏幕的设备上正常运行。 对于仅触摸式设备，拖放操作严重不足。 给定设备还可能不支持媒体查询。 根据您的听众，您可能想探索另一个选择。
为什么我们需要另一种方式
我们已经确定，我们目前用于移动检测的两种最受欢迎的方法都有其缺点：一种难以扩展，另一种不利于接口设计。
让我们退后一步，问问自己我们关心哪些设备。 基本上，任何具有小屏幕尺寸和/或具有触摸功能的屏幕，或两者兼而有之的设备，都应成为经过特殊调整的界面的目标。 从技术上讲，这涵盖了相当多的设备，但实际上，我们正在谈论以下特定类别：
触摸平板电脑（包括iPad）
上网本
现代手机或设备
iPad（或其他触摸平板电脑）和上网本之间的差异是一个很好的例子，说明仅凭媒体查询就无法达到界面设计的要求。 iPad和典型的上网本的屏幕尺寸大致相同，因此，出于布局考虑，媒体查询效果很好。 但是，iPad的触摸功能阻碍了我们认为理所当然的应用程序的许多正常界面元素。 我们必须考虑到这一点，以创造最佳的体验。
触摸屏所带来的损失
触摸界面很棒，对吗？ 他们是未来的潮流。 但是，我们与支持触摸的设备进行交互的方式与我们与非触摸设备进行交互的方式有很大不同。 这远远超出了正常的补偿范围，例如在链接周围插入更多填充以为人的手指创建较大的击打区域，或者说明缺少鼠标。
在触摸环境中进行开发时，我们会失去一些我们已经深爱的更加丰富的界面元素。 例如，悬停状态，内部页面滑动以及拖放。
如果我们只关注功能而不是限制，则可以避免采用不太令人兴奋的界面来说明这些新设备。 拖放无法在触摸设备上工作的原因不是因为它没有意义；而是因为它没有意义。 这是因为将手指按到屏幕上并将其移动的动作已经具有默认行为：滚动。 相同的原理适用于大多数现代触摸设备上的手指捏合操作。 以相同的方式，我们可以防止带有return语句false的链接触发，也可以防止手指滚动或缩放。
创造丰富的经验
因此，我们有它。 媒体查询使我们能够使用特定版本的布局来定位设备屏幕尺寸，但在向触摸和非触摸设备提供专门的界面时却失败了。 在我对iPad感到沮丧之后，我决定进行一些老式的研究，以查看是否有一种方法可以判断设备是否具有触摸功能。 在搜寻了Safari开发人员文档几个小时之后，我发现了一小部分概述了Touch对象以及如何处理某些事件。 这是我发现的。
如何检测触摸
Safari为我们提供了一个名为Touch的JavaScript事件对象，这个小家伙的唯一职责是让您知道所使用的设备具有响应式触摸屏界面。 这就是圣杯，正是我刚开始四处寻找时所要寻找的东西。 不用说，我很讨厌。
实现非常简单：
if(window.Touch) { /* JavaScript for your touch interface */ }
检测触摸功能后，您可以进行各种调整以补充界面。 不利的一面（您不认为这会那么容易，对吗？），因为它目前仅适用于Apple设备。
当然，还有另一种方法：您可以在第一次触摸屏幕时执行触摸检测。 这远非理想，但它仍然是检测设备上触摸的有效方法。 在大多数现代设备中，该方法也得到了更广泛的支持。 缺点是您不能依靠它来对设计进行重大更改。 一旦用户触摸屏幕，页面就会突然转变。 但是，正如我们已经讨论过的，如果您主要希望进行触摸检测以调整诸如悬停状态或拖放之类的丰富交互，则应该能够进行以下操作：
var touch_detect = { handler: function(event){ /* JavaScript for your touch interface */ }};document.ontouchstart = touch_detect.handler;
通过这种方式检测触摸，我们可以做所有事情：从切换特殊类以弥补悬停控件的不足，到构建一个全新的界面，重点在于利用设备固有的丰富功能。
我们还可以跟踪运动或行为有关JavaScript事件： ontouchmove ， ontouchend ， ontouchcancel ， orientationchange ， gesturestart ， gesturechange和gestureend 。 从iPhone OS 2.0开始，所有这些事件在Apple设备上都可用。 到目前为止，只有其中一些操作具有Android支持，例如ontouchstart ，因此可以安全使用。
当我们将这种检测方法与CSS媒体查询结合使用时，我们可以开发出一些非常快速，响应迅速且令人难忘的应用程序。 这些不仅限于电话，还可以一口气部署到任何地方。 一次构建，然后部署到任何地方。
默认行为
现在您知道该设备是否支持触摸功能，可以开始专门为该设备构建界面了。 但是在执行此操作之前，我们需要覆盖一些相对全局的触摸设备默认行为，就像之前所提到的（没有双关语）。 这些主要是手指滚动和捏到缩放，这可能会影响我们可能想要创建的任何拖放或特殊的手指移动动作。 但是，我们希望避免全局禁用这些行为，因为它们仍然非常有用。 相反，我们将使用事件侦听器逐个元素地禁用它们。
通过捕获手指的移动并劫持它，我们可以使用jQuery的event.preventDefault()方法防止默认的滚动行为，并插入所需的任何内容。
这是将触摸检测与事件侦听器结合使用以防止发生默认操作的示例：
$(function(){ if(window.Touch) { touch_detect.auto_detected(); } else { document.ontouchstart = touch_detect.surface; }}); // End loaded jQueryvar touch_detect = { auto_detected: function(event){ /* add everything you want to do onLoad here (eg. activating hover controls) */ alert('this was auto detected'); activateTouchArea(); }, surface: function(event){ /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */ alert('this was detected by touching'); activateTouchArea(); }}; // touch_detectfunction activateTouchArea(){ /* make sure our screen doesn't scroll when we move the "touchable area" */ var element = document.getElementById(' element_id '); element.addEventListener("touchstart", touchStart, false);}function touchStart(event) { /* modularize preventing the default behavior so we can use it again */ event.preventDefault();}
您可以看到我们正在为touchstart事件添加一个事件侦听器。 发生这种情况时，我们调用函数touchStart() ，该函数将禁用侦听器所附加元素的默认行为（滚动和缩放）。 该元素可以是div ，链接，可拖动区域-您想要的任何内容。 它使您可以使用元素，而不必担心奇怪的行为。
支持触摸检测
当前， Touch对象仅在Apple产品（iPod，iPad，iPhone）中可用，但是在许多现代设备（包括Android设备）中都可以进行滑动检测和ontouchstart事件的使用。 我没有机会完全测试新的Blackberry。
如果我不得不猜测，我会说Touch对象应该会在不久的将来出现在大多数设备上。 这很有意义，并且已经在Safari的WebKit中。 使其进入Chrome，Android和WebOS只是一小步。
界面设计展望
每一种设计或开发技术都会有漏洞。 没有完美的解决方案。 最佳实践将与基础技术一起发展。 如果我们可以采取一些渐进的步骤来为用户创造最佳体验，我们将能够注入一层看起来很自然，几乎看不见的互动。 最终，最好的用户体验是我们从未听说过的。
进一步阅读
From: https://www.sitepoint.com/adapting-an-interface-for-touch-devices/
757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
