Nginx configuration website for PC and mobile phone

In view of the site's compatibility under a variety of devices, there are many websites will have mobile version and computer version of two versions. Visit the same website URL, when the server identifies the user to use the computer access, open the computer version of the page, if users use mobile phone access, you will get the mobile version of the page.

1, determine the client's device type

To make a website suitable for PC and mobile devices, first of all, you have to be able to make accurate judgments. The user-agent in the header of the HTTP request can differentiate between the client's browser type and user-agent to determine the client's device.

Whether it is a PC or a mobile phone, due to the diversity of operating systems and browsers, it is not easy to realize this judgment. Fortunately, there is a set of open source solutions that differentiate between PC and mobile phones through user-agent, which can be used directly:

http://detectmobilebrowsers.com/

As the use of nginx in this article, just download the Nginx configuration on the website.

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|mobile.+firefox| 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|xda|xiino ") {set $mobile _rewrite perform;} if ($http _user_agent ~* "^ (1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac (er|oo|s\-) |ai (KO|RN) |al (av|ca| CO) |amoi|an (EX|NY|YW) |aptu|ar (Ch|go) |as (te|us) |attw|au (di|\-m|r |s) |avan|be (CK|LL|NQ) |bi (lb|rd) |bl (Ac|az) |br (e| V) w|bumb|bw\-(n|u) |c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co (mp|nd) |craw|da (it|ll|ng) |dbte|dc\-s|devi|dica |dmob|do (c|p) o|ds (12|\-d) |el (49|ai) |em (L2|ul) |er (ic|k0) |esl8|ez ([4-7]0|os|wa|ze) |fetc|fly (\-|_) |g1 u|g560|gene| Gf\-5|g\-mo|go (\.w|od) |gr (Ad|un) |haie|hcit|hd\-(m|p|t) |hei\-|hi (Pt|ta) |hp (I|IP) |hs\-c|ht (c (\-| |_|a|g|p|s|t) |TP ) |hu (AW|TC) |i\-(20|go|ma) |i230|iac ( |\-|\/) |ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja (t|v) a|jbro|jemu|jigs|kddi|keji|kgt (|\/) |klon|kpt |kwc\-|kyo ( c|k) |le (no|xi) |lg (g|\/(k|l|u) |50|54|\-[a-w]) |libw|lynx|m1\-w|m3ga|m50\/|ma (TE|UI|XO) |MC (01|21|CA) |m\-cr|me (rc| RI) |mi (o8|oa|ts) |mmef|mo (01|02|bi|de|do|t (\-| |o|v) |zz) |mt (50|p1|v) |mwbp|mywa|n10[0-2]|n20[2-3]|n30 (0|2) |n50 (0| 2|5) |n7 (0 (0|1) |10) |ne ((c|m) \-|on|tf|wf|wg|wt) |nok (6|i) |nzph|o2im|op (TI|WV) |oran|owg1|p800|pan (a|d|t) |PDXG|PG ( 13|\-([1-8]|c)) |PHIL|PIRE|PL (AY|UC) |pn\-2|po (ck|rt|se) |PROX|PSIO|PT\-G|QA\-A|QC (07|12|21|32|60|\-[2-7]|i\-) | Qtek|r380|r600|raks|rim9|ro (Ve|zo) |s55\/|sa (Ge|ma|mm|ms|ny|va) |sc (01|h\-|oo|p\-) |sdk\/|se (c (\-|0|1) |47|mc|nd| RI) |sgh\-|shar|sie (\-|m) |SK\-0|SL (45|id) |sm (AL|AR|B3|IT|T5) |so (ft|ny) |sp (01|h\-|v\-|v) |sy (01|MB) |t2 (18|50) |t6 ( 00|10|18) |ta (gt|lk) |tcl\-|tdg\-|tel (i|m) |tim\-|t\-mo|to (pl|sh) |ts (70|M\-|M3|M5) |tx\-9|up (\.b|g1|si) |utst|v400| V750|veri|vi (Rg|te) |vk (40|5[0-3]|\-v) |vm40|voda|vulc|vx (52|53|60|61|70|80|81|83|85|98) |w3c (\-|) | Webc|whit|wi (g |nc|nW) |wmlb|wonu|x700|yas\-|your|zeto|zte\-) {set $mobile _rewrite perform;} if ($mobile _rewrite = perform) {# phone}

Nginx through the above configuration, get HTTP request user-agent, using regular expressions to match the phone device.

2, according to the device to adapt to different pages

First of all to prepare the website of the PC version and mobile version of the two sets of pages, through the previous judgment on the device, to reverse proxy to different versions:

Location/{Proxy_pass http://192.168.20.1;  # Computer Edition if ($mobile _rewrite = perform) {Proxy_pass http://192.168.20.2;  # Mobile Version}}

If the static page does not require a reverse proxy, replace proxy_pass with root:

Location/{root/html/pc;if ($mobile _rewrite = perform) {root/html/mobile;}}

3, mobile version linked to the PC version

When the user opens the page, it may be necessary to open the PC version if the device is incorrectly judged, or if the user wants to get more information. At the bottom of the mobile page, there is usually a link to the PC version:

You can do this by setting a cookie with JavaScript when you click on the "Computer" link:

<href= "http://xxx.com/"  onclick= "Document.cookie = ' gotopc=true '"  > Computer Edition </a>

Also in the Nginx configuration to add judgment, if the inclusion of this cookie into the PC version:

if ($http _cookie ~ ' Gotopc=true ') {set $mobile _rewrite do_not_perform;}

4. Commissioning

With this configuration, you can use chrome to simulate devices like your phone, tablet, and more.

Finally, a complete nginx configuration is given:

server {Listen 80;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| Mobile.+firefox|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|xda|xiino ") {set $mobile _rewrite perform;} if ($http _user_agent ~* "^ (1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac (er|oo|s\-) |ai (KO|RN) |al (av|ca| CO) |amoi|an (EX|NY|YW) |aptu|ar (Ch|go) |as (te|us) |attw|au (di|\-m|r |s) |avan|be (CK|LL|NQ) |bi (lb|rd) |bl (Ac|az) |br (e| V) w|bumb|bw\-(n|u) |c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co (mp|nd) |craw|da (it|ll|ng) |dbte|dc\-s|devi|dica |dmob|do (c|p) o|ds (12|\-d) |el (49|ai) |em (L2|ul) |er (ic|k0) |esl8|ez ([4-7]0|os|wa|ze) |fetc|fly (\-|_) |g1 u|g560|gene| Gf\-5|g\-mo|go (\.w|od) |gr (Ad|un) |haie|hcit|hd\-(m|p|t) |hei\-|hi (Pt|ta) |hp (I|IP) |hs\-c|ht (c (\-| |_|a|g|p|s|t) |TP ) |hu (AW|TC) |i\-(20|GO|MA) |i230|iac (|\-|\/) |ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja (t|v) a|jbro|jemu|jigs|kddi|keji|kgt (|\/) | Klon|kpt |kwc\-|kyo (c|k) |le (no|xi) |lg (g|\/(k|l|u) |50|54|\-[a-w]) |libw|lynx|m1\-w|m3ga|m50\/|ma (TE|UI|XO) |MC (01| 21|CA) |m\-cr|me (Rc|ri) |mi (o8|oa|ts) |mmef|mo (01|02|bi|de|do|t (\-| |o|v) |zz) |mt (50|p1|v) |mwbp|mywa|n10[0-2]|n20[ 2-3]|n30 (0|2) |n50 (0|2|5) |n7 (0 (0|1) |10) |ne ((c|m) \-|on|tf|wf|wg|wt) |nok (6|i) |nzph|o2im|op (TI|WV) |oran|owg1|p800| Pan (a|d|t) |PDXG|PG (13|\-([1-8]|c)) |PHIL|PIRE|PL (AY|UC) |pn\-2|po (ck|rt|se) |PROX|PSIO|PT\-G|QA\-A|QC (07|12|21|32 |60|\-[2-7]|i\-) |qtek|r380|r600|raks|rim9|ro (Ve|zo) |s55\/|sa (Ge|ma|mm|ms|ny|va) |sc (01|h\-|oo|p\-) |sdk\/|se (c (\ -|0|1) |47|mc|nd|ri) |sgh\-|shar|sie (\-|m) |SK\-0|SL (45|id) |sm (AL|AR|B3|IT|T5) |so (ft|ny) |sp (01|h\-|v\-|v) |sy (01| MB) |t2 (18|50) |t6 (00|10|18) |ta (gt|lk) |tcl\-|tdg\-|tel (i|m) |tim\-|t\-mo|to (pl|sh) |ts (70|M\-|M3|M5) |tx\-9|up (\.b| G1|si) |utst|v400|v750|veri|vi (rg|te) |vk (40|5[0-3]|\-v) |vm40|voda|vulc|vx (52|53|60|61|70|80|81|83|85|98) |w3c (\- | ) |weBc|whit|wi (g |nc|nw) |wmlb|wonu|x700|yas\-|your|zeto|zte\-) {set $mobile _rewrite perform;} if ($http _cookie ~ ' Gotopc=true ') {set $mobile _rewrite do_not_perform;}  Location/{Proxy_pass http://192.168.20.1;  # Computer Edition if ($mobile _rewrite = perform) {Proxy_pass http://192.168.20.2; # Mobile Version}}}

Nginx configuration website for PC and mobile phone