开发者社区> 像教授> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

让网站支持多种客户端

简介:
+关注继续查看

引言

现在的手机上网已经很普及,尤其是智能手机,在一些稍大的城市,几乎是满天飞了,在一些中小城市,普及的也比较广。在我国,手机上网用户,已经快达到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的例子。


  1. 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。

 

再来看两个例子,都是中兴手机访问网站之后,在日志中留下的信息。


  1. MQQBrowser/3.7/Adr (Linux; U; 2.2.2; zh-cn; ZTE-U V880 Build/UNI_CN_V880 1.1;480*800) 
  2.  
  3. 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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WebSocket + Redis简单快速实现Web网站单设备登录功能
单设备登录作用很明显,就是为了保护用户账号安全,今天我们不说手机APP,我们来说说PC Web网站如何简单快速实现这种效果。本篇文章重点是实现单设备登录,内容未涉及WebSocket + Redis的概念和使用方法。限于本人经验,如有错误,欢迎指正。
0 0
客户端ADR配置
前两天YJ部门有一个使用occi的应用,启动时出现报错,应用日志记录的内容是Occipool error,没有任何其他信息了,后来同事向应用中加了一些日志语句,重编译运行才发现报的是ORA-00020错误,数据库process连接进程达到了上限,通过参数修改,解决了这个问题。
889 0
客服系统 客户端
flex 实现了一个 Avaya的 CTI服务的客户端通讯   avaya 交换机 cti计算机电话每户 flex 电脑客户端 或网页版。
483 0
SVN 版本服务器搭配全过程详解(含服务端、客户端)
  使用SVN还是在3年前,当时也没对这个做过多的研究,那个时候用的还是非可视化的,需要,安装apach,并做一些配置,现在有可视化的东西了,直接转载了一篇,原文地址http://www.cnblogs.
663 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于浏览器的实时构建探索之路
立即下载
基于浏览器的实时构建探索之路--玄寂
立即下载
从“连接”到“交互”
立即下载