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

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

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。

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

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

至于后续应用拿到解析结果怎么使用,就可以发挥各种想象了。
天猫这边是一个域名对应多个不同终端类型的页面,每个终端类型都会有一份缓存啥的。
杨老,有知识没文化
简单知乎用户 赞同
请访问这个网站,有现成的脚本可以使用,所有平台的都有。
Detect Mobile Browsers
知乎用户,四处游荡的码农
  1. 第一步先在服务器端使用User Agent判断,先匹配出移动设备,这一步可以统计User Agent列表(可通过网站访问日志获取或者使用自己的设备收集),写出匹配设备的正则表达式(比如iPhone/Touch系列的匹配规则是/iPhone OS/i,如果要适配系统版本号,规则会更复杂),根据匹配结果做对应的网站版本输出。
    需要注意的是在智能手机在移动CMWAP接入方式下User-Agent会被网关过滤,所以在第一步服务器端判断UA后可以再在浏览器端对服务器端获取不到UA的访问设备使用Javascript进行二次判断。
  2. 有三种方式,根据第一步的匹配结果 :
    a. 跳转到不同的网址,对三个网站进行分别维护 (例子:Facebook,国内各大门户)
    b. 同一个网址,针对不同设备使用不同的页面模板输出页面 (例子:deviantArt、 Tumblr)
    c. 只使用一套前端展示,对各种设备做集中适配(UI布局的自适应、前端技术的综合兼容,例子:cubiq.org)
    前两种方式后端维护成本较高,适合移动端和PC端产品内容形态不同的情况,第三种方式适合各平台内容一致的情况,后端维护成本较小,但是对前端技术和UI布局要求非常高。
  3. 参见楼上的解决方案
知乎用户,.
类似的

//判断访问的设备信息
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('android') != -1) {
window.location = path + "/DownloadSoftWare/" + name + "/" + id+ "/";
} else if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1) {
alert("要改为苹果官网下载地址");
//window.top.location = "苹果官网";
} else if (ua.indexOf("Window NT")) {
window.top.location = path + "/";
} else {
alert("sorry,暂不支持您的系统下载!!");
}
icecreamliker,苦逼的普通员工一枚
额,http协议的request headers中包含了user-agent这个key,获取这个key-value就可以判断是用什么访问了,当然,也是可以伪造的。。。。
104 人关注该问题