Nginx配置站点适配PC和手机
考虑到站点的在多种设备下的兼容性,有非常多站点会有手机版和电脑版两个版本号。訪问同一个站点URL,当服务端识别出用户使用电脑訪问。就打开电脑版的页面,用户假设使用手机訪问,则会得到手机版的页面。
1、推断client的设备类型
要想让站点适配PC和手机设备,首先要能做出准确的推断。HTTP请求的Header中的User-Agent能够区分client的浏览器类型。能够通过User-Agent来推断client的设备。
不管是PC还是手机,因为操作系统、浏览器的多样性,自己来实现这个推断并不easy。
好在国外有一套开源的通过User-Agent区分PC和手机的解决方式,能够直接使用:
http://detectmobilebrowsers.com/
因为本文使用Nginx,仅仅要在站点上下载Nginx配置就可以。
set $mobile_rewrite do_not_perform; if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
set $mobile_rewrite perform;
} if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
set $mobile_rewrite perform;
} if ($mobile_rewrite = perform) {
# 手机
}
Nginx通过以上的配置,获取HTTP请求的User-Agent,使用正則表達式来匹配手机设备。
2、依据设备适配不同的页面
首先要准备好站点的PC版和手机版两套页面,通过之前对设备的推断,来反向代理到不同的版本号:
location / {
proxy_pass http://192.168.20.1; # 电脑版
if ($mobile_rewrite = perform) {
proxy_pass http://192.168.20.2; # 手机版
}
}
假设是静态页面不须要反向代理,那么用root替换proxy_pass:
location / {
root /html/pc;
if ($mobile_rewrite = perform) {
root /html/mobile;
}
}
3、手机版链接到PC版
在用户打开页面后,假设进入了手机版。可能因为错误推断设备,或者用户想获取很多其它信息,可能会须要打开PC版。在手机版页面的底部,一般会有一个链接指向PC版:
能够通过在点击“电脑版”链接的时候用JavaScript设置一个Cookie来实现这个功能:
<a href="http://xxx.com/" onclick="document.cookie = 'gotopc=true'">电脑版</a>
同一时候在Nginx中增加推断。假设包括此Cookie则进入PC版:
if ($http_cookie ~ 'gotopc=true') {
set $mobile_rewrite do_not_perform;
}
4、调试
完毕以上配置后,能够通过Chrome浏览器来模拟手机、平板电脑等设备。
最后给出完整的Nginx配置:
server {
listen 80; set $mobile_rewrite do_not_perform; if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)? |phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
set $mobile_rewrite perform;
} if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
set $mobile_rewrite perform;
} if ($http_cookie ~ 'gotopc=true') {
set $mobile_rewrite do_not_perform;
} location / {
proxy_pass http://192.168.20.1; # 电脑版
if ($mobile_rewrite = perform) {
proxy_pass http://192.168.20.2; # 手机版
}
}
}
Nginx配置站点适配PC和手机的更多相关文章
- Nginx配置网站适配PC和手机
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...
- Nginx 配置站点
1-进入 配置文件夹 cd /etc/nginx/cof.d 2-创建一个一站点名称命名的配置文件 vim kestrel-syslyracom.conf 3-在.conf 文件中输入 ...
- Nginx配置站点https
step 1: 检查nginx的编译参数 使用nginx -V可以查看,如果编译参数中包含http_ssl_module,可以继续下一步操作,如果没有,则需要从新编译. step 2: 申请证书 目前 ...
- Nginx配置——区分PC或手机访问不同域名
新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...
- Nginx配置——区分PC或手机访问不同域名以及http跳转https
新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...
- 【转】Nginx区分PC或手机访问不同网站
原文链接:http://www.nginx.cn/784.html 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合 ...
- Nginx区分PC或手机访问不同网站
近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”. 响应式web设 ...
- Nginx区分PC和手机
目录 一.简介 二.配置 nginx识别手机端跳转到wap pc端跳转移动端 一.简介 有时候需要当手机访问PC站页面时自动跳转到对应的手机站页面. 二.配置 nginx识别手机端跳转到wap 即手机 ...
- Nginx 多站点配置
最近学习和练习的时候,为Laravel应用程序添加了好几个站点,有些程序删除之后站点却还留着,这让强迫症感到非常难受,上次解决了这个问题之后并没有记录一下,于是导致今天又花了很多时间折腾,所以特地来写 ...
随机推荐
- iis 7上发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容
iis 7上发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容 提示里面的解决方法是: 如果不希望启用目录浏览,请确保配置了默认文档并且该文件存在. 使用 II ...
- [转]memcached+magent实现memcached集群
From : http://www.cnblogs.com/happyday56/p/3461113.html 首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Mem ...
- 【手机网络游戏 编程】C#异步socketAPI调用 处理数据的流程
之前客户端在网络条件好的时候,运行没问题.但是有时候手机的网络不稳定,接受数据可能不稳定,导致接受数据错误,一直都不知道,原来是接受数据处理的不够好! 现在更改过后的接受数据的逻辑如下: //接收 p ...
- 附1 踩过的jedis的一些坑
1.java.lang.Long to java.lang.B]类型转换异常 解决方案:归还资源部分,使用jedis.close() 2.jedis数组越界异常 解决方案:版本太低,升到2.8.0
- DEV控件之ChartControl 属性设置【转】
DEV控件之ChartControl用法 一.总体概述 这个控件包含3层,最外面的chartControl层.中间的XYDiagram层.最里面的Series层.功能非常强大,但同时使用起来也相对复杂 ...
- set练习
#include <iostream> #include <set> #include <vector> using namespace std; int main ...
- Flask Restful服务简单实现
官网:http://flask.pocoo.org/docs/1.0/quickstart/#routing 1.安装 windows下:pip3 install Flask 具体参照:windows ...
- logistic回归(一)
http://www.2cto.com/kf/201307/226576.html , 这个是Sigmoid函数,在这个回归过程中非常重要的函数,主要的算法思想和这个密切相关.这个函数的性质大家可以自 ...
- Python在VSCode中进入交互界面调试
VSCode非常强大,断点好用,美中不足,每次只能通过下面窄窄一行进行各种检查,而python的优点就在于交互式的调试,所以希望能够在断点时能够进入到正常的交互界面进行调试. 我用的插件是: 设置交互 ...
- how to restrict copy paste in a Textbox, in MFC?
[问题] I am developing a small application in MFC... there is a little problem..hope you guys would he ...