zoukankan      html  css  js  c++  java
  • 通过UA实现手机端电脑端的分离!(重点)

    实现Nginx区分PC和手机访问不同的网站是物理上完全隔离的两套网站(一套手机端、一套pc端)

    这样带来的好处pc端和移动端的内容可以不一样,移动版网站不需要包含特别多内容。只要包含必要的文字和较小的图片,这样可以节约流量,有好处自然也会加大难度,难题就是需要自己维护两套环境,并且需要自动识别用户所使用的设备并跳转到相应的网站,当判断错误时用户可以手动切换正确的网站!

    示例:有两套网站代码。一套PC版放在/usr/local/nginx/html/web,一套移动版放在/usr/local/nginx/html/mobile。只需要修改nginx配置文件,Nginx通过UA自动判断是否来自移动端访问,实现不同的客户端访问不同的内容。

    ==============================================================

    [root@localhost ~]# cd /usr/local/nginx/html/
    [root@localhost html]# ls
    40x.html 50x.html error.jpg index.html linux.jpg roomc trror.txt
    [root@localhost html]# mkdir web mobile
    [root@localhost html]# mv index.html web/

    [root@localhost html]# vim mobile/index.html

    www.shouji.com

    [root@localhost html]# vim ../conf/nginx.conf

    location / {
    root /usr/local/nginx/html/web;
    if ( $http_user_agent ~
    "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|
    (CLDC)|(UP.Browser)|(UCWEB)|(SEMC-Browser)|(Mini)|(Symbian)|(PaIm)|(Nokia)|(Panasonic)|(MOT-)|
    (SonyEricsson)|(NEC-)|(Alcate)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amol-)|(Capitel)|(PHILIPS)|
    (SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG-)|(LG/)|(EG900)|(CECT)|(Compal)|
    (kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|
    (EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(Soutec)|(SAGEM)|(SEC-)|(SED-)|
    (EMOL-)|(INN055)|(ZTE)|(iphone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)
    ") { root /usr/local/nginx/html/mobile; } index index.html index.html; }
  • 相关阅读:
    flex 布局 shrink 属性
    flex 布局 flex-grow 属性
    flex 布局 flex-basis 属性
    flex 布局 justify-content 对齐的图解
    CSS定位要点笔记
    CSS浮动要点笔记
    CSS选择器要点笔记
    eslint no-unused-vars 解决办法
    NodeJs使用Promise解决多层异步调用的简单学习
    windows10 搭建 NTP 时间服务器
  • 原文地址:https://www.cnblogs.com/CMX_Shmily/p/11528233.html
Copyright © 2011-2022 走看看