Nginx：pc端和移动端网站适配

最新推荐文章于 2025-05-30 18:18:09 发布

原创最新推荐文章于 2025-05-30 18:18:09 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nginx

本文介绍如何使用Nginx配置实现电脑浏览器访问展示PC端页面，手机浏览器访问展示移动端页面的方法。通过设置不同的监听端口、域名及根目录，配合条件判断和重写规则，确保用户在不同设备上获得最佳浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：电脑浏览器访问展示pc端的页面，手机端浏览器访问展示手机端的页面，两套页面，两个域名。

server {
    listen       80;
    server_name  domain.com www.domain.com;
    client_max_body_size 10m;

    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|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|phone)|xda|xiino") {
        set $mobile_rewrite perform;
    }

    if ($mobile_rewrite = perform) {
        rewrite ^ http://m.domain.com$request_uri? redirect;
        break;
    }

    location / {
        root   /usr/share/nginx/project_pc;
        try_files $uri $uri/ /index.html
        index  index.html;
    }
}

server {
    listen       80;
    server_name  m.domain.com;
    client_max_body_size 10m;
    root /usr/share/nginx/project_mobile;
    index index.html;

    location ^~ *.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    location ^~ /static/ {
        add_header Cache-Control "public,max-age=31536000";
    }
}