使用场景
一个项目上线后通常要做兼容处理，用户使用pc访问或者移动设备访问要显示不同的布局样式。如果你的网站内容比较少，使用css 的媒体查询功能，根据设备宽度使用不同的css样式，
//判断条件还可以写的更精细，这里只是示例
@media (min-width:768px) {
//这里是pc端样式
...
...
}
@media (max-width:768px) {
//这里是移动端样式
...
...
}
缺点和解决方案
css媒体查询适合小项目，内容不多，如果是大项目，移动端和pc端显示的内容都不一样，使用媒体查询会相当麻烦，这时候移动端和pc端项目要单独开发，互不干涉，使用nginx判断客户端信息，直接返回不同的文件
...
...
...
server {
listen 80;
server_name xxxxx.com www.xxxx.com;
location / {
# 声明变量，后根据客户端信息设置变量的值
set $is_mobile 0;
if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)){
set $is_mobile 1;
}
# 判断客户端设备返回不同文件
# pc
if ($is_mobile = 0){
root html/bj985/pc;
}
if ($is_mobile = 1){
root html/bj985;
}
index index.html index.htm;
}
location ^~ /shopApi{
rewrite ^/shopApi/(.*)$ /$1 break;
proxy_pass http://120.461.116.99:8088;
}
}
踩坑经验
- 上面判断代码中 if 后必须有个空格，
- 判断条件 $is_mobile = 0 这里只有一个等号，不同于编程语言中的判断是两个等号
- 判断变量 $is_mobile 后等号两边也必须有空格，不然nginx重启失败
