Nginx---适配pc端和移动端

? 需求

在开发中,我们常常会遇到这样的需求:根据用户设备的不同,返回对应样式的页面。说白了,就是我在pc端看到的页面样式和布局,要跟移动端的不一样。

通常,我们使用自适应的前端框架(比如bootstrap),就可以达到这样的需求。这种方法不能说不行,但是(关键是这句?),如果把pc端和移动端都写到一块儿,就会提高代码的复杂度,降低代码的灵活性。

这样的例子太多了,我曾经在做网站的时候,老板?要求在pc端和移动端不光显示的样式、布局不同,连显示的内容模块都要不同。pc端显示甲模块、乙模块,移动端显示甲模块、丙模块,没过两天,需求又变了,pc端要显示甲模块、乙模块,还有丙模块,移动端去掉丙模块,添加丁模块。......太血腥了?

所以,对自己好一点,如果条件允许,还是把pc端和移动端分开写为好。京东、淘宝......这些大网站也是这么干的。

? 思路

如果我们写好了两套方案:pc端和移动端,那怎么部署呢?这是就需要nginx大显身手了。在nginx中,可以根据用户请求的user-agent来判断是返回pc端还是移动端。

? 开干

nginx.conf文件中添加配置:

server {
 listen 8081;
 server_name 127.0.0.1;
 location / {
 root /home/py/myDevelop/testNginx/pc/;
 if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
 root /home/py/myDevelop/testNginx/mobile/;
 }
 
 index index.html index.htm;
 }
 }
说明:这里就是用了一个if语句,使用$http_user_agent全局变量来判断用户请求的user-agent,指向不同的root路径,返回对应站点。

这样就可以达到目的了。

---(完)---

作者:BigDipper原文地址:https://segmentfault.com/a/1190000042211479

%s 个评论

要回复文章请先登录注册