Nginx适配PC或移动设备

Nginx适配PC或移动设备

现在很多网站都是有了PC端和H5站点的,因为这样就可以根据客户设备的不同,显示出体验更好的,不同的页面了。

比如我们常见的淘宝、京东......这些大型网站就都没有采用自适应,而是用分开制作的方式。

关键点

$http_user_agent的使用:

Nginx通过内置变量$http_user_agent,可以获取到请求客户端的userAgent,就可以用户目前处于移动端还是PC端,进而展示不同的页面给用户。

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

cd /usr/share/nginx
mkdir pc
mkdir mobile

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

<h1>I am pc!</h1>

<h1>I am mobile!</h1>

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

server{
     listen 80;
     server_name jd.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的Gzip压缩配置

Gzip是网页的一种网页压缩技术,经过gzip压缩后,页面大小可以变为原来的30%甚至更小。更小的网页会让用户浏览的体验更好,速度更快。gzip网页压缩的实现需要浏览器和服务器的支持。

gzip是需要服务器和浏览器同时支持的。当浏览器支持gzip压缩时,会在请求消息中包含Accept-Encoding:gzip,这样Nginx就会向浏览器发送接收到gzip后的内容,同时在相应信息头中加入Content-Encoding:gzip,声明这是gzip后的内容,告知浏览器要先解压后才能解析输出。

gzip的配置项

Nginx提供了专门的gzip模块,并且模块中的指令非常丰富。

gzip : 该指令用于开启或 关闭gzip模块。
gzip_buffers : 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。
gzip_comp_level : gzip压缩比,压缩级别是1-9,1的压缩级别最低,9的压缩级别最高。压缩级别越高压缩率越大,压缩时间越长。
gzip_disable : 可以通过该指令对一些特定的User-Agent不使用压缩功能。
gzip_min_length:设置允许压缩的页面最小字节数,页面字节数从相应消息头的Content-length中进行获取。
gzip_http_version:识别HTTP协议版本,其值可以是1.1.或1.0.
gzip_proxied : 用于设置启用或禁用从代理服务器上收到相应内容gzip压缩。
gzip_vary : 用于在响应消息头中添加Vary:Accept-Encoding,使代理服务器根据请求头中的Accept-Encoding识别是否启用gzip压缩。

gzip最简单的配置

http {
   .....
    gzip on;
    gzip_types text/plain application/javascript text/css;
   .....
}

gzip on是启用gizp模块,
下面的一行是用于在客户端访问网页时,对文本、JavaScript 和CSS文件进行压缩输出

运行之后

如果你是windows操作系统,你可以按F12键打开开发者工具,单机当前的请求,在标签中选择Headers,查看HTTP响应头信息。你可以清楚的看见Content-Encoding为gzip类型。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Page 1:nginx 服务器安装及配置文件详解 CentOS 6.2 x86_64 安装 nginx 1.1 ...
    xiaojianxu阅读 8,589评论 1 41
  • 《老男孩Linux运维》笔记 隐藏Nginx软件版本号 一般来说,软件的漏洞都和版本有关。因此要尽量隐藏对访问用户...
    Zhang21阅读 3,712评论 0 28
  • nginx在工作中已经有好几个环境在使用了,每次都是重新去网上扒博客,各种编译配置,今天自己也整理一份安装文档和n...
    AndyChin阅读 2,330评论 0 4
  • I/O模型Nginx介绍Nginx的安装和目录结构Nginx的配置Nginx的编译安装 一、I/O模型 (一)I/...
    哈喽别样阅读 916评论 0 4
  • by Janden.Ma at 2019-01本教程使用Linux(CentOS 7)作为操作系统,建议配置Lin...
    JandenMa阅读 977评论 0 0