`

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

 
阅读更多

近几年来，随着手机和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配置如下：

location / {#默认PC端访问内容
    root /usr/local/website/web;#如果是手机移动端访问内容
    if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC\-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT\-)|(SonyEricsson)|(NEC\-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi\-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG\-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC\-)|(SED\-)|(EMOL\-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" ){
		root /usr/local/website/mobile;}

	index index.html index.htm;}

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

<script type="text/javascript">// <![CDATA[if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                                //触屏手机版地址
				window.location.href="http://m.264.cn";}else if(/iPad/i.test(navigator.userAgent)){
                                //pad版地址}else{
                                //普通手机版地址
				window.location.href="http://wap.264.cn"}}catch(e){}}}// ]]></script>

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

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

function createCookie(name, value, days, domain, path) {
  var expires = '';
  if (days) {
    var d = new Date();
    d.setTime(d.getTime() + (days*24*60*60*1000));
    expires = '; expires=' + d.toGMTString();
  }
  domain = domain ? '; domain=' + domain : '';
  path = '; path=' + (path ? path : '/');
  document.cookie = name + '=' + value + expires + path + domain;}function readCookie(name) {
  var n = name + '=';
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var c = cookies[i].replace(/^\s+/, '');
    if (c.indexOf(n) == 0) {
      return c.substring(n.length);
    }
  }
  return null;}function eraseCookie(name, domain, path) {
  setCookie(name, '', -1, domain, path);}

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

if($http_user_agent ~*'(Android|webOS|iPhone|iPod|BlackBerry)'){set $mobile_request '1';}if($http_cookie ~'mobile_request=full'){set $mobile_request '';}if($mobile_request ='1'){
  rewrite ^.+ http://m.264.cn$uri;}

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

<a onclick="setCookie('iphone_mode', 'full', 1, '264.cn')" href="http://www.264.cn">
  电脑版
</a>

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

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

<a onclick="deleteCookie('mobile_mode', '264.cn');" href="http://m.264.cn">
  手机版
</a>

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

PC版网站配置

upstream app_server {
  server 0.0.0.0:9001;}

server {
  listen 80;
  server_name www.264.cn;

  root /path/to/main_site;
  # ...

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    # ...

    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      set $mobile_request '1';
    }
    if ($http_cookie ~ 'mobile_request=full') {
      set $mobile_request '';
    }
    if ($mobile_request = '1') {
      rewrite ^.+ http://m.264.cn$uri;
    }

    # serve cached pages ...

    if (!-f $request_filename) {
      proxy_pass http://app_server;
      break;
    }
  }}

手机移动版配置

upstream m_app_server {
server 0.0.0.0:9001;}

server {
  listen 80;
  server_name m.264.cn;

  root /path/to/mobile_site;
  # ...

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    # ...

    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      set $mobile_request '1';
    }
    if ($http_cookie ~ 'mobile_request=full') {
      set $mobile_request '';
    }
    if ($mobile_request != '1') {
      rewrite ^.+ http://www.264.cn$uri;
    }

    # serve cached pages ...

    if (!-f $request_filename) {
      proxy_pass http://m_app_server;
      break;
    }
  }}
分享到：
| 自己制作ssl证书：自己签发免费ssl证书， ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Nginx配置如何区分PC或手机访问不同域名

    配置Nginx以区分PC或手机访问不同的域名，是网站开发和运维中常见的需求，用于提供更为个性化的用户体验，尤其是在响应式网站设计和移动优先策略中具有重要意义。 本文首先介绍了基于HTTP_USER_AGENT来区分不同设备...

    Nginx抢购限流配置实现解析

    例如，在处理50x错误页面时，可以区分移动端和PC端返回不同的内容： ``` location /50x.html { if ($http_user_agent ~* "mobile|android|iPhone|ios") { return 200 '{"msg":"活动过于火爆，请稍后重试!","data...

    2023最新站长必备在线工具箱系统源码 含上百款工具 带后台版本 自适应模板 优化修复版

    - **自适应设计**：支持多种设备访问，无论是PC端还是移动端都能获得良好的用户体验。 - **可定制化**：用户可以根据需求自行添加或修改工具，具有很高的灵活性。 #### 三、安装配置步骤详解 ##### 1. 准备工作 -...

    概要设计说明书1

    Elasticsearch部署在独立服务器上，根据访问量动态扩展分片，保证搜索性能。 在出错处理上，系统区分了预设错误（如密码错误）和未知错误（程序bug）。预设错误会向前端返回对应消息，未知错误则返回通用的错误信息...

    卢亿雷：Hadoop在网盘和在线备份的应用与挑战

    在线备份相较于网盘（同步盘）的特殊性体现在是否保持用户的原始路径、是否有设备区分、是否能备份企业级数据库、用户是否可以自己保存密钥、以及元数据存储方式不同。 4. 分布式存储平台简介： 分布式存储平台可以...

    三十种架构设计模式（下）.pdf

    此模式主张为不同类型的前端应用（如PC网站与移动应用）设计专门的后端接口和服务，以适应不同终端的特性和需求。 - **适用场景**：当不同前端平台间存在较大差异时，采用此模式可以更好地满足各自的特点。 - **...

    分布式存储在网盘和在线备份的应用研究

    - **前端应用层**：包括PC客户端、手机客户端和Web端，这些是用户与云存储系统交互的界面。 - **业务处理层**：负责处理文件流信息等具体业务逻辑。 - **大数据存储层**：如Hadoop/Carbonite等，用于处理大规模的...

Magicbox
Global site tag (gtag.js) - Google Analytics