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

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

5 个回答

张克军豆瓣前端工程师

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

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

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。

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

显示全部

胡强人人网-3G前端开发

收起
知乎用户、张启迪Arisis 等人赞同
  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,暂不支持您的系统下载!!");
}

杨老有知识没文化

收起
请访问这个网站,有现成的脚本可以使用,所有平台的都有。
Detect Mobile Browsers

icecreamliker苦逼的普通员工一枚

收起
额,http协议的request headers中包含了user-agent这个key,获取这个key-value就可以判断是用什么访问了,当然,也是可以伪造的。。。。
51 人关注该问题