移动不再仅仅意味着智能手机。这个词已经演变成一个包罗万象的术语，指的是任何没有永久绑定在墙上插座上的计算设备。尽管全球有10亿部手机在使用，完毕5200万台平板电脑售出就在2012年最后一个季度，而且预计到2016年，平板电脑销量将超过笔记本电脑。裁剪你的网站，以提供一个优化的移动体验，自动调整自己到多种设备类型将很快成为一个要求而不是一个功能。
流行的解决方案:响应式网页设计
现在针对移动Web进行开发需要了解移动浏览器、它们的JavaScript和CSS引擎，以及各种触屏设备的预期用户体验。这个问题的流行解决方案是响应式网页设计。响应式网页设计利用CSS3中的新功能，根据屏幕大小、方向和像素比主动修改网页元素的大小和位置。它是内容驱动型网站的强大解决方案，其主要要求是使文本和图像易于理解。
另一方面，调整内容的大小和位置并不能完全满足网页应用程序和电子商务网站等交互性很强的网站的界面或用户体验需求。对于这些类型的网站，响应式设计只是一个更大的难题的一小部分。
响应式Web设计的问题
首先，移动用户已经适应了本地应用程序的工作方式。
要通过Web吸引这些用户，越来越需要一种界面布局来模拟他们与设备关联的本机应用程序。仅靠响应式设计技术无法完成这项任务，原因如下:
- 屏幕大小和像素比例不足以确定设备类型。
- 响应式设计不允许创建深入的、特定于触摸屏的内容交互元素当用户在移动设备上访问网站时，只能重新设置样式或隐藏/显示现有元素。
- Phablets，比如三星Galaxy Note系列，越来越受欢迎。虽然它们拥有小型平板电脑的像素，但它们在尺寸上更接近手机，通常更适合手机UI和UX。
- 当浏览器窗口缩小时，桌面布局将转换为移动布局。
如果你的手机设计偏向触屏交互，这会阻碍用户体验。
虽然响应式网页设计在创意圈内越来越受欢迎，但它的局限性使其无法成为博客、设计作品集和新闻网站之外的常规解决方案。
服务器端脚本+ DOM操作
幸运的是，随着HTML5、CSS3和JavaScript DOM标准在主流移动浏览器中被广泛接受，替代技术(响应式设计是可选组件)也可用。构建与高端本地应用程序功能类似的web应用程序——无需重定向到单独的子域——对于专注且富有冒险精神的web开发人员来说是一个可以实现的目标。
在我公司的网站SpotTrot上，它是内容驱动的，但也提供了一些交互元素-我们不仅提供桌面和移动界面，而且还提供单独的平板电脑界面。我们这样做没有重定向用户到单独的“m点”(例如。m.yourwebsite.com或mobile.yourwebsite.com)或“t点”(例如:
t.yourwebsite.com或tablet.yourwesbite.com子域。换句话说，我们不为移动设备和平板设备维护单独的站点——我们只是修改DOM，并根据用户的浏览设备提供适当的JavaScript和CSS文件。
使用服务器端脚本库来改进设备识别
实现这一目标的第一步是使用服务器端用户代理字符串解析来确定访问者的设备类型。
解析用户代理字符串以服务于自定义接口几乎与Web本身一样古老。近年来，它已成为交付“m-dot”版本网站的主要技术。响应式设计理念避免为移动设备提供单独的子域，但是可以重新利用传统的服务器端脚本检测，以多种方式呈现相同的HTML文件。
有很多库可以使服务器端设备检测更容易，但很少有像它们一样工作MobileESP，在我看来。MobileESP适用于每一种主要的Web编程语言，可以检测设备类型和功能。下面是我们的网站如何使用MobileESP的PHP版本来分类设备并提供适当的CSS和JavaScript的示例:
<？php//为设备创建一些常量class Device {const TABLET = 0;const PHONE = 1;const DESKTOP = 2;｝//初始化MobileESP对象$uagent_info = new uagent_info();//定义设备if($uagent_info->isTierTablet) {$device =设备::TABLET;} elseif($uagent_info->isIphone || $uagent_info->isAndroidPhone || $uagent_info->isTierRichCss) {$device =设备::PHONE;} else {$device =设备::DESKTOP;} ?> …<！——为设备提供适当的CSS和JavaScript——><？PHP开关($device): ?phpcase Device::TABLET: ?> 
...
CSS媒体查询vs. DOM操作
虽然台式机和手机界面可以遵循更传统的设计规则，但平板电脑领域的变化程度要高得多，需要更多的预见性。平板电脑的屏幕尺寸通常在7到10英寸之间，而手机的屏幕尺寸通常在4英寸左右。因此，平板电脑上的视网膜显示对屏幕上的像素数量有更大的影响。
对于我们的网站来说，这意味着单列文本显示并不总是适用于平板电脑，需要切换到桌面版网站上使用的三列显示。
这可以通过CSS媒体查询或JavaScript DOM操作。
CSS媒体查询
CSS3允许基于用户屏幕特征(如宽度和方向)大量使用条件。下面是一个使用媒体查询设计响应式布局的例子:
@媒体屏幕和(min-width: [width]px) {.class{属性:值;}} @媒体屏幕和(-webkit-min-device-pixel-ratio: 2) @媒体屏幕和(方向:横向)@媒体屏幕和(设备-aspect-ratio: 16/9)
DOM操作
但是，我们的网站使用JavaScript DOM编程通过jQuery在单列视图和三列视图之间切换。
通过操作DOM可以对网页的布局进行完整的实时控制。特定于平板电脑的JavaScript，由用户代理解析提供，包含更改现有HTML div元素的CSS的代码。
//如果屏幕足够宽，我们需要3列If ($(window).width() >= 770) {//创建缩进$ (" # front_items ") . css({“margin-top”:“5 px”,“margin-left”:“20 px”});//调整列的大小var textWidth = ($("#carousel").width() - 70) / 3;$ (" .front_column ") . css({“宽度”:textWidth +“px”、“margin-bottom”:' 0 '});｝//一个列接口其他{$ (" # front_items ") . css({“margin-top”:“0”,“margin-left”:' 0 '});textWidth = $("#carousel").width() + 20;$ (" .front_column ") . css({“宽度”:textWidth +“px”、“margin-bottom”:“5 px”});｝
服务器端脚本+ DOM操作的缺点
尽管这种技术，在我看来，与使用CSS3/media查询相比，允许对设计和交互性进行更大的控制，但它并非没有潜在的缺点。
- 没有设备或浏览器检测是完美无缺的。最大化适当的设备检测的最佳方法是使用定期更新的库，如MobileESP。
- 如果用户禁用了JavaScript，此解决方案将无法完全发挥作用。尽管少数禁用JavaScript的用户习惯了不能完全运行的网站，只使用特定于设备的，如果你想在不使用JavaScript的情况下保持一些好处，CSS媒体查询是最好的选择。
- 这种解决方案需要为每个目标设备维护单独的CSS和JavaScript文件而不是媒体查询可以提供的单个CSS文件。
如何在我们的网站上工作
导航菜单是SpotTrot网站三个版本中唯一一个完全不同的元素。所以这是一个很好的话题来展示这个方法在现实世界中是如何工作的。在桌面上，一个水平菜单位于标题下方，与传统的网站布局相匹配。
这使得用户能够自然地进行交互，并将这些元素的视觉设计作为主要的区别。
在平板电脑上，同样的水平菜单被移到标题上方。然后稍微改变一下，将圆角移到底部，以加强其在页面顶部的位置。
这遵循了原生移动应用程序的预期界面，所有导航控制通常在顶部的一个栏中。
最后，手机版本界面变化最大。大多数智能手机不可能安装所有的水平导航按钮，所以设计选择了垂直菜单。
按钮自动适应屏幕的宽度，以保持用户的垂直方向感，补充了小屏幕的单列布局。
结论
在过去的几年中，web应用程序的设计和开发受到触摸屏的影响最大。计算机交互向触觉体验的转变是“移动革命”的核心因素。随着触屏笔记本电脑和台式机的普及，智能手机和平板电脑的界面设计很快将成为所有网络应用程序的布局方式。
学习这些技术和哲学现在可能是可选的，但它最终将很快成为任何web开发人员工作描述的核心部分。
