美文网首页
Nginx教程6-适配PC或移动设备

Nginx教程6-适配PC或移动设备

作者: 夜半暖人心 | 来源:发表于2019-10-31 19:16 被阅读0次

1.Nginx适配介绍

Ⅰ.目的:电脑浏览器访问展示pc端的页面,手机端浏览器访问展示手机端的页面,两套页面,两个域名。

Ⅱ.作用:可以根据客户设备的不同,显示出体验更好的页面。

2.Nginx适配设置:原理是Nginx通过内置变量$http_user_agent,可以获取到请求客户端的userAgent,判断目前处于移动端还是PC端,进而展示不同的页面给用户。

Ⅰ.在/usr/share/nginx/目录下新建两个文件夹,分别为:pc和mobile目录

cd /usr/share/nginx
mkdir pc
mkdir mobile

在pc和miblic目录下,新建两个index.html文件,文件里下面内容

//pc目录下
<h1>welcome to pc!</h1>

//mobile目录下
<h1>welcome to mobile!</h1>

Ⅱ.进入etc/nginx/conf.d目录下,修改8001.conf文件,改为下面的形式:

server{
     listen 80;
     server_name nginx.lubaojun.com;
     location / {
      root /usr/share/nginx/pc;
      if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
         root /usr/share/nginx/mobile;
      }
      index index.html;
     }
}

相关文章

  • Nginx教程6-适配PC或移动设备

    1.Nginx适配介绍 Ⅰ.目的:电脑浏览器访问展示pc端的页面,手机端浏览器访问展示手机端的页面,两套页面,两个...

  • Nginx适配PC或移动设备

    Nginx适配PC或移动设备 现在很多网站都是有了PC端和H5站点的,因为这样就可以根据客户设备的不同,显示出体验...

  • 移动化的SEO

    [跳转适配:等于是新站一个移动站,根据设备或者UA]代码适配:PC,移动使用相同的地址,不考虑设备,根据浏览器通过...

  • LayaAir屏幕适配

    LayaAir屏幕适配 官方教程链接:LayaAir实战开发11-屏幕适配 屏幕适配 随着移动端设备(手机、平板、...

  • vue移动端总结

    移动端适配 相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端...

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • 如何用纯css 媒体查询media queries实现响应式汉堡

    PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式 一、 head里添加meta移动端的样式 ☰ ...

  • 移动端是怎么做适配的?

    前端进行移动端开发的时候,因为移动端的设备大小种类繁多,如果按照pc端的方式进行开发,则需要很繁琐,要写很多适配移...

  • 2-移动端适配问题

    解决网页在移动端的适配问题,一般的思路是通过查询设备的屏幕大小,自动对元素进行等比缩放,如果是PC端的适配问题就是...

  • 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在...

网友评论

      本文标题:Nginx教程6-适配PC或移动设备

      本文链接:https://www.haomeiwen.com/subject/riotbctx.html