nginx 移动端和pc端自动跳转
场景
| 项 | 域名 | 描述 |
|---|---|---|
| pc端 | www.one.com |
用于pc端访问官网 |
| 移动端 | m.one.com |
用于移动端访问 |
现在的需求是这样,在pc端访问www.one.com和m.one.com都跳转到www.one.com
而在移动端访问www.one.com和m.one.com都跳转到m.one.com
参考,github上的这篇文章很详细,但是比较复杂,很多场景我们用不到,所以参考这个,我修改如下。
pc端:www.one.com
server {
listen 80;
server_name www.one.com;
#charset koi8-r;
#access_log logs/host.access.log main;
# 下面根据user_agent可以获取
if ($http_host !~ "^www.one.cn$") {
rewrite ^(.*) http://www.one.cn$1 permanent;
}
if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) http://m.one.com$1 permanent;
}
location / {
root /home/build/rampage-home-front/dist/html;
index index.html index.htm;
}
}
作用部分代码如下:
if ($http_host !~ "^www.one.cn$") {
rewrite ^(.*) http://www.one.cn$1 permanent;
}
if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) http://m.one.com$1 permanent;
}
移动端:m.one.com
server {
listen 80;
server_name m.one.cn;
#charset koi8-r;
#access_log logs/host.access.log main;
#非移动端跳转到 www.one.com
if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) http://www.one.com$1 permanent;
}
location / {
root /home/build/rampage-mobile-front/dist;
index index.html index.htm;
}
}
作用部分代码如下:
if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) http://www.one.com$1 permanent;
}
至此完成了相关配置
实例配置:
PC端网站配置文件
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name weifeng.com;
root /usr/share/nginx/html;
rewrite ^(.*)$ https://${server_name}$1 permanent;
include /etc/nginx/default.d/*.conf;
if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) https://m.weifeng.com$1 permanent;
}
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 443;
server_name weifeng.com;
ssl on;
root /usr/share/nginx/html;
index index.html index.htm;
ssl_certificate /cert/weifeng.com.pem;
ssl_certificate_key /cert/weifeng.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) https://m.weifeng.com$1 permanent;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
移动端nginx配置文件
server {
listen 80;
server_name m.weifeng.com;
root /usr/share/nginx/html-mobile;
rewrite ^(.*)$ https://${server_name}$1 permanent;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 443;
server_name m.weifeng.com;
ssl on;
root /usr/share/nginx/html-mobile;
index index.html index.htm;
ssl_certificate /cert/weifeng.com.pem;
ssl_certificate_key /cert/weifeng.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/share/nginx/html-mobile;
index index.html index.htm;
}
}
nginx 移动端和pc端自动跳转的更多相关文章
- asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转
很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问PC页面的时 ...
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...
- iis 如何搭建url 重定向,实现无线端和pc端不同的跳转
第一步,下载安装ARR(Application Request Routing), http://www.iis.net/downloads/microsoft/application-request ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- js判断是移动端还是pc端
运行页面的时候,执行到js会判断来自于移动端还是pc端,如果是移动端则跳转制定链接地址,这样在手机端会有额外的不必要浪费的加载时间 var browser={ versions:function(){ ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
- js判断移动端还是PC端
function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/i ...
- js判断游览器是移动端还是PC端
js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...
- 检测当前运行环境——移动端与PC端。
方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...
- 关于移动端和PC端的交互的区别
对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...
随机推荐
- js的类型系统--js基于原型的基石是所有对象最终都能够类型自证
一.动态类型 变量能够类型自证的类型即为动态类型 二.基础与内置类型 三.对象与类型的关系 1.对象本身能够自证为基本类型: 2.元原型可能为一个空的集合: 3.复合对象的成员能够自证为基本类型: 4 ...
- 开发(二) ardunio批量固件上传地址
https://blog.csdn.net/Naisu_kun/article/details/84958561 批量烧录固件到模块中上面讲了如何编写上传程序,接下来讲讲如何量产.相比<Ardu ...
- 优化sql技巧
当表很大的时候可以设计冗余字段,避免与大表连表查询造成性能低下 比如日志表和用户表,日志表通常到后期会相当的大可以做一个username的冗余字段,避免查看username的时候去和user表关联 当 ...
- json-server模拟服务器API
一.npm安装 npm install --global json-server 二.使用:创建一个json数据文件,比如: { "students": [{ "id&q ...
- linux实现pwd
版本1: 调用系统接口getcwd,实现路径打印. /*** ***文件名:1_mypwd.c ***描述:通过系统函数getcwd实现pwd命令 ***/ #include<stdio.h&g ...
- [西软xms]会员卡消费和余额情况表
select * from vipcard; #过滤卡类型财富卡(CFK)权益卡(QYK)幸福卡(XFK) select id from vipcard where (card_class ='XFK ...
- VS设置自动压缩CSS
- 第10组 Alpha冲刺(1/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 学习Android studio和Java,基本了解APP前端的制作 完善项目APP原型 展示GitHu ...
- DT包 -- R语言中自定义表格数据
DT 包提供了 JavaScript 库 DataTables 的一个R接口,它使得R对象(矩阵或数据框)可以在HTML页面上显示为表格. 该包的DataTables函数生成的表格提供了数据的筛选.分 ...
- python: str()
tx1 = '中国' tx2 = u'中国' print tx1 print tx2 print type(tx1) print type(tx2) #<type 'str'> str() ...