链接：https://www.zhihu.com/question/20004700/answer/13678113

  • 第一步先在服务器端使用User Agent判断，先匹配出移动设备，这一步可以统计User Agent列表(可通过网站访问日志获取或者使用自己的设备收集)，写出匹配设备的正则表达式(比如iPhone/Touch系列的匹配规则是/iPhone OS/i，如果要适配系统版本号，规则会更复杂)，根据匹配结果做对应的网站版本输出。
    需要注意的是在智能手机在移动CMWAP接入方式下User-Agent会被网关过滤，所以在第一步服务器端判断UA后可以再在浏览器端对服务器端获取不到UA的访问设备使用Javascript进行二次判断。
  • 有三种方式，根据第一步的匹配结果 ：
    a. 跳转到不同的网址，对三个网站进行分别维护 (例子：Facebook，国内各大门户)
    b. 同一个网址，针对不同设备使用不同的页面模板输出页面 (例子：deviantArt、 Tumblr)
    c. 只使用一套前端展示，对各种设备做集中适配(UI布局的自适应、前端技术的综合兼容，例子：http://cubiq.org)
    前两种方式后端维护成本较高，适合移动端和PC端产品内容形态不同的情况，第三种方式适合各平台内容一致的情况，后端维护成本较小，但是对前端技术和UI布局要求非常高。
  • 参见楼上的解决方案

前端判断用户请求是PC还是移动端的更多相关文章

  1. js如何判断用户是在pc端和还是移动端访问

    js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...

  2. js判断用户是在PC端或移动端访问

    js如何判断用户是在PC端和还是移动端访问.  最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...

  3. js判断用户的浏览器设备是移动端还是pc端

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  4. 关于实现判断用户是在PC端和还是移动端访问。

    最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终 ...

  5. js判断用户浏览器是PC还是手机，自动跳转

    browserRedirect(); function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); ...

  6. agent判断用户请求设备

  7. 如何使用fiddler抓取https请求（PC和移动端）

    最近做一个抓取移动端app接口,并执行评论,收藏的接口功能测试.怎么搞/(ㄒoㄒ)/~~ 按照老思路试一试,第一步还是要用fiddler来帮忙获取接口信息! 一.基本的抓取http请求设置: 1.cm ...

  8. js 判断用户是手机端还是电脑端访问

    通过userAgent 判断,网页可以直接使用 navigation对象 node端 可以通过请求头的 ctx.request.header['user-agent'] const browser = ...

  9. 如何使用js判断当前页面是pc还是移动端打开的

    1.利用了正则表达式和三目运算符,含义就是如果是移动端打开的话那就跳转到 "https:www.baidu.com/" ,如果不是就跳转到"http://new.baid ...

随机推荐

  1. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  2. 单例模式（Singleton）详解——转载

    单例模式(Singleton) 首先来明确一个问题,那就是在某些情况下,有些对象,我们只需要一个就可以了, 比如,一台计算机上可以连好几个打印机,但是这个计算机上的打印程序只能有一个, 这里就可以通过 ...

  3. js改变div宽度

    document.getElementById('Content_Right_id').style.width = document.documentElement.clientWidth - 250 ...

  4. 《第一行代码》学习笔记17－碎片Fragment（2）

    1.碎片的状态和回调: (1)运行状态:碎片可见+所关联的活动处于运行状态. (2)暂停状态:当活动进入暂停状态(由于另一个未占满屏幕的活动被添加到栈顶),与其相关联的可见碎片会进入暂停状态. (3) ...

  5. UI基础视图----UIImageView总结

    UIImageView和UILabel一样,也是UIKit框架中非常常用的视图类.继承关系和UILabel完全一致(都是继承于UIView),功能也相似(用户交互都默认为关,主要用于展示),只不过UI ...

  6. js中的两个数字a，b求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。一共b个数字相加，例如用户输入2，5 s=2+22+222+2222+22222

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 基于注释的Spring Security实战

    一.准备工作 预准备的工具及软件有: 1. Eclipse IDE:我使用Eclipse JEE 3.7版,即eclipse-jee-indigo-SR2-win32-x86_64.zip 2. JD ...

  8. （原）ubuntu16重装显卡驱动后，torch中的问题

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6030232.html 参考网址: https://github.com/torch/cutorch/i ...

  9. 【android】android调用模拟器超时问题

    问题如下: 解决方案: 1)重启连接桥 C:\Users\hacket>adb kill-server C:\Users\hacket>adb start-server或者 adb log ...

  10. Python入门学习之input()与raw_input()的区别

    登陆博客时才发现已经注册一年了,由于之前一直都没有打算从事软件开发行业,所以博客便被束之高阁,软件开发,对于我来说,是成长,更是磨炼.头脑风暴总是来去自由,记录灵感,与大家一起共享思维进步的成果. P ...