如何识别用户是通过 PC、iPad 还是手机来访问网站?

现在需要开发一个网站,要求是做到 PC,iPad,3G 手机同步访问,如何区分三种方式? 如果要做到同步的话,应该服务器上挂三个网站,根据访问方式定向到对应的网站? 因为苹果不支持 Flash,所以我做了2个页面,如何让苹果手机自动跳转到指定页面? 希望有经验的人能够贴出代码,或讲解思路。谢谢。
关注者
127
被浏览
22625

6 个回答

这是如何做响应性开发的问题。

首先要明确响应策略,这是前提。因产品而异。大体上分三类支持:

1. PC和iPad等10寸平板是一类,UI可以一致(这样PC上的设计要考虑对触屏友好)
2. 3寸的智能手机是一类,UI重新设计
3. WAP手机上,没UI。可认为是第2类的纯内容版


这三类设备通过在服务器端判断user agent跳转到不同URL上。就你的问题而言应该是“表面上”做2个网站支持。为什么说表面上,因为是不同的UI和URL看起来是两个网站。但实际开发上,data层是一样的,view层做两套。
agent = request.environ.get('HTTP_USER_AGENT', '')
if ('AppleWebKit' in agent and 'Mobile' in agent):
templ = 'templ_mobile'
else:

templ = 'templ'
return st(templ, **locals())

只是示例,实际上UA的情况更复杂。


对于第1类,如果需要再进一步区分PC和触屏设备。差别不大的话,UI上可以用css的media query识别。JS上可以用modernizr识别。仍然是优先考虑触屏,然后fallback到PC方案上。 如果觉得引用modernizr太重了,可以单用一些简单判断(参考modernizr的源码)


比如最近做过一个播放器:

//判断是否支持原生的audio标签:
useFlash = (function() {
var a = document.createElement('audio');
return !(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
})()


if (useFlas) {
player = new FlashPlayer(options);

} else {
player = new Html5Player(options);

}

player.play();



Flash做为fallback方案,这里的Flash是一个无形的组件,负责播放和JS通讯。FlashPlayer和Html5Player这个两个类封装成相同的接囗。

我觉得大部分情况下不需要跳转到一个新页面。实现局部响应,也可以考虑用iframe。

响应性开发的复杂度不完全在开发上,对设计也有要求。 但相比维护多站成本还是小的多。

我来抢答了。。
目前已经获得的成就就是在nginx上搞了一个detector,用于识别终端和设备类型。
识别方式其实类似其他几个回答里描述的,主要还是依赖用户发出请求的ua信息,http请求到nginx的时候,会对ua进行解析,然后将识别结果放到http头里转发给下游的应用。这样,后端前端都可以拿到解析结果。
由于UA不一定准确,或者信息不够全,我们也会在用户第一次访问的时候,页面上插一个脚本来计算用户终端的设备尺寸和像素尺寸、是否支持触屏及dpi等,然后放到cookie中,这样nginx还可以综合cookie + ua进行判断,比如物理像素大于720就可以判断此设备可能是pad(也可能是国产超级大屏手机

至于后续应用拿到解析结果怎么使用,就可以发挥各种想象了。
天猫这边是一个域名对应多个不同终端类型的页面,每个终端类型都会有一份缓存啥的。