引言
现在的手机上网已经很普及，尤其是智能手机，在一些稍大的城市，几乎是满天飞了，在一些中小城市，普及的也比较广。在我国，手机上网用户，已经快达到4亿，可见市场是多么的诱人。
智能手机常见的操作系统有：android，apple os，windows phone，还有以前的symbian，smart phone等。
而且，这两年又加入了一种新的客户端，那就是pad。pad相比较手机而言，屏幕更大，7寸，8寸，10寸，存储空间更大，甚至处理能力更强。
pad的操作系统主要是两种：android和apple os。
手机和pad上网一般都支持手机卡上网，或者是无线连接上网。
所以现在的网站，有相当一部分在建立的时候，就考虑要支持手机浏览。就算是已经建立好的网站，很多也开始考虑加入对手机浏览的支持。更有一些，同时还做了手机客户端，充分利用手机的资源，提供更进一步的服务。
今天我们讨论的话题就是如何让网站支持多种客户端浏览，以及在设计的时候有哪些因素需要考虑。手机及pad客户端不在今天的讨论范围，以后会再开一篇来讨论这些客户端的设计开发。
三种客户端类型
访问网站的客户端主要有三种类型：
- 手机
- pad
- pc
为什么要区分三种类型呢？
因为这三种客户端的屏幕尺寸是不一样的，代表所能看到的内容的容量是不同的，更有甚者，三种设备用户的操作习惯也是不同的。所以需要针对三种类型，分开设计界面和使用流程，包括常说的用户体验，肯定要设计三类。
有人说了，pc还有各种尺寸呢，分辨率呢。手机也是有3.7的，有4.0的，有4.5的，有5.0的。pad也有7寸的，有8寸的，有10寸的。你怎么不针对每一种做区分呢？
每一中类型虽然都各自有不同的分辨率，也有一些屏幕大小的差别。但是，在他们的内部差别，相对和其他类型的差别来说，是不大的，其实是可以考虑在一起的。如果想要做的更精细的，才需要精确设计到每一种尺寸，否则不需要考虑太多内部的差距，但是也要做好测试，做一些针对内部差距的自适应设计。
让网站支持多种客户端，有三种方式：
- 一种就是根据用户的请求信息，判断用户的类型，然后引导用户进入合适页面。
- 一种就是设计独立的m.域名，例如www.baidu.com是提供给pc访问的，m.baidu.com是提供给手机访问的。
- 还有一种就是结合上面的情况，做更好的更人性化的设计。
根据请求区分用户类型
用户访问网站，有的是用pc，有的是用pad，有的是用pc，首先要做好区分，要知道访问的用户是那种类型，然后才好根据类型把用户引导到适当的页面。
从技术角度来讲，最常用，最主要，最精准的方法就是使用http的request的header中的user-agent信息。通过分析这个信息，可以知道请求的客户端类型，是手机，还是pad，还是pc。甚至可以知道客户端的操作系统，分辨率，生产厂商，客户端型号，浏览器类型，浏览器内核，手机型号，pad型号等等信息。
user-agent信息的内容还取决于浏览器的类型，不同的浏览器可能会加入不同的信息。
让我们来看几个例子。
关于获取user-agent，有很多工具可以使用。例如：firefox的插件firebug，chrome自带的developer tool，以及IE9及以上版本的开发者工具。
首先看一个chrome访问www.baidu.com的例子。
- User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11
从上面就可以看出来客户端的操作系统是windows，浏览器是chrome。
再来看两个例子，都是中兴手机访问网站之后，在日志中留下的信息。
- MQQBrowser/3.7/Adr (Linux; U; 2.2.2; zh-cn; ZTE-U V880 Build/UNI_CN_V880 1.1;480*800)
- MQQBrowser/3.7/Mozilla/5.0 (Linux; U; Android 2.2.2; zh-cn; ZTE-U V880 Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
第一个里面就包含了分辨率的信息，手机浏览器是QQ浏览器，ZTE手机。第二个里面的信息要多一些，但是没有分辨率。
其实利用user-agent还可以做一些统计。例如一些网站经常会发布，有多少访问量，有多少手机访问量，手机访问占总访问的比例，有多少android访问量，有多少iphone访问量。甚至是手机上网占的比例，什么时段手机上网量大，都可以从user-agent分析总计出来，结合时间信息，结合referer，可以做很多的访问统计。
这是我们需要做的一件事，就是根据请求类型，引导用户进入不同的页面，或者给用户呈现不同的内容。
设计独立的m.域名
在建立www域名的同时，建立m.域名，专供手机访问，建立pad.专供pad访问。独立设计，独立开发，相互影响不大。
引导+独立的m.域名
前两种的原则就是讲多种访问分开，各自访问各自的页面，有各自的效果。你非要在pc上敲入m.域名，也可以看到内容，但是内容是给m.域名设计的。你非要在手机敲入www也行，我就给你看www域名下面的结构和内容。
这个有利有弊，把决定权交给用户，“你访问什么，我给你什么”，在开发方面，各自独立，没有牵连，各自设计考虑，没有太多交集和干扰。
弊端就是不够人性化，比如说我只是知道有个网站www.example.com，不知道你还有域名m.example.com，我进入www.example.com一看，内容这么多，字体很小，排版也很不舒服，不好操作，是啊，这都是给pc设计的，手机访问效果肯定不好。或者说，我手机大，而且我也不嫌小，我就想访问www.example.com，但是你就是帮我做了跳转，使得我没有办法在手机访问www.example.com。这个也不太好。
我觉得好一点的话，需要考虑下面几个因素：
- m.独立域名一定要有，可以方便的访问支持手机浏览的网站。
- 但是如果你想访问www域名，也是可以的。
- 在页面上可以方便的切换，同时在需要自动判断的时候，引导用户进入合适的页面或者域名。
这就需要我们在能区分用户访问类型之后，还要考虑用户的访问流程，就是可能的几种情况。
比如说用户在pc上访问www，那就直接显示www下面的页面结构和内容就可以了。但是如果用户在pc上敲入了m.，就存在一个分歧，是引导用户进入www呢？还是显示m.，但是提示用户进入更合适的www，还是只在界面上保留切换链接，让用户自己切换呢？这个可能还需要考虑应用的类型，应用主要的访问者类型。
还比如说，用户通过过手机访问m.，那么就显示m.的结构和内容，页面有切换链接，如果用户非要切换，那么就给他看切换之后的。如果用户不知道有m.域名，只是敲入www.域名，我觉的就不用提示用户了，直接把他引到进入m.域名就可以了，因为m.域名更适合手机浏览，不会使他对网站产生不好的印象。如果在后续，他还是要点击了切换链接，那么就切换到www.域名。
本文转自 virusswb 51CTO博客，原文链接：http://blog.51cto.com/virusswb/1088691，如需转载请自行联系原作者
