首页 > nginx > Nginx区分PC或手机访问不同网站

Nginx区分PC或手机访问不同网站

2013年4月12日 发表评论 阅读评论

近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”。

响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备阅读。但这个不是本文的重点,重点还是放在nginx如何实现上来。

本文要讲的的是如何使用nginx区分pc和手机访问不同的网站,是物理上完全隔离的两套网站(一套移动端、一套pc端),这样带来的好处pc端和移动端的内容可以不一样,移动版网站不需要包含特别多的内容,只要包含必要的文字和较小的图片,这样会更节省流量。有好处当然也就会增加困难,难题就是你需要维护两套环境,并且需要自动识别出来用户的物理设备并跳转到相应的网站,当判断错误时用户可以自己手动切换回正确的网站。

下面以264查询网为实例来说明如何实现上面的需求。
明确的的需求:
1.制作两个站点PC端网站www.264.cn,和移动端网站m.264.cn
2.使用pc或移动设备访问任何一个域名都会跳到相应的站点。
3.用户可以选择访问移动版还是PC版网站,移动版网站始终有切换到PC版的链接,PC版当网站通过手机访问时会提供移动版网站的链接。
4.当用户选着访问其中一种类型的网站后,保存设置结果生效时间为24小时,当然长短可以自己设置。

简单的服务器端实现方法
有两套网站代码,一套PC版放在/usr/local/website/web,一套移动版放在/usr/local/website/mobile。只需要修改nginx的配置文件件,nginx通过UA来判断是否来自移动端访问,实现不同的客户端访问不同内容。
这种方法的缺点是移动端和PC端用同一个域名,存在黑帽的嫌疑,而且UA并不是总是判断的准确,如果判断错误的情况下,用户不能手动修改访问的网站类型。
关键的Nginx配置如下:

纯客户端js实现方式
下面这段代码放到首页<head>和</head>之间即可

推荐的nginx区别手机和PC访问方法
利用前端js和后端nginx配合,js通过设置cookie来设定当前访问哪页面。

增加设置cookie的js代码,这段代码需要在移动网站和PC网站的所有页面都要放置。

nginx增加如下配置,根据UA和cookie判断当前是移动端还是PC端访问

移动版页面添加PC版链接
默认用户进来时会先判断UA,如果是手机端访问就会进入手机版,但也会存在误判进入手机版或者需要更多信息进入PC版,那么就需要在移动版的页面放入代码,让用户可以从移动版切换到web版并且下次访问会保留设置。

如果用户访问不正确时,点击电脑版链接就可以进入PC版网站,并且24小时内再次访问会记忆上次访问的网站类型设置。

PC版网站增加访问手机版的链接
在PC版的网站适当的地方加入下面的链接让用户可以切换到手机版的网站。

完整的nginx端配置,当然是去掉了与本文功能无关的配置,并不是一个完可用的配置,只是给大家一个整体的框架。

PC版网站配置

手机移动版配置

除非注明,本站文章均为: nginx.cn原创,转载请注明本文地址: http://www.nginx.cn/784.html

--完--

分类: nginx 标签: , , ,
  1. 2016年9月11日00:23 | #1

    你好,这样做会不会影响爬虫收录呀,URL变了,
    我的站点http://www.dodoer.com,采用的代码适配,在接免费CDN的又不行,头大。
    你有好的方法吗?

  2. 2016年7月22日17:23 | #2

    你好,第一种方式: nginx 提示 'root' directive is not allowed here in /***.conf
    是nginx不同版本的语法发生变化了吗?
    如果PC站和移动站在同一个域名的不同路径,怎么设置比较好?

    • 2016年7月30日14:59 | #3

      哪个版本。

    • yedemon
      2016年8月25日10:50 | #4

      你个倒霉鬼,和我一样, 那个root 的位置不一样

  3. 2016年4月9日15:26 | #5

    这个在理啊。

  4. 2015年6月30日17:53 | #6

    js操作cookies的代码与超链接那的函数,完全对应不上~mobile_mode iphone_mode 也不知道是哪里来的~

  5. 2015年5月11日14:49 | #7

    慢慢再研究研究。谢谢。

  6. arion
    2015年2月28日14:10 | #8

    写的非常好,具有参考意义。

  7. 2013年12月7日09:59 | #9

    还是推荐使用WEB代码吧!不然等一下需求来一个需要手机版也可以切换回电脑版(即手机版切换电脑版,在手机上显示电脑版的)

    • 2014年12月23日11:55 | #10

      使用web端代码如js or php需要解析完了才跳转到手机页面,如果是在服务器端直接转发会快很多

  8. 2013年4月23日11:02 | #11

    还是通过WEB代码实现比较推荐

  9. 2013年4月14日15:26 | #12

    响应式布局前端代码麻烦一些,单纯通过web程序代码实现,不同的屏幕显示不同的样式,乃至pc上的浏览器窗口变化时布局界面也会变化,这个可能是今年的主流
    --------------------
    通过各种判断方法判断后进入两套不同的站点也是有好处的,至少优化起来针对的屏幕限定范围小了,加载流量可以有针对性的降下来,对来不来就1块1M流量的gprs类型网络是相当的给力;非常不爽的缺点就是要维护多套站点

  1. 2015年3月6日13:08 | #1
  2. 2015年7月15日13:05 | #2