Nginx configuration site suitable for PC and mobile phone

In view of the site's compatibility under a variety of devices, there are very many sites will have mobile version and the computer version of the two version number. Visit the same site URL when the server identifies the user using the computer. Open the computer version of the page, the user assumes the use of mobile phone access, you will get the mobile version of the page.

1. Infer the device type of the client

To make a site suitable for PC and mobile devices, you must first make accurate inferences. The user-agent in the header of the HTTP request can distinguish the browser type of the client. The ability to infer client devices through user-agent.

Whether it is a PC or a mobile phone, because of the diversity of operating systems and browsers, it is not easy to implement this inference yourself.

Fortunately, there is a set of open source, through user-agent distinguish between PC and mobile phone solution, can directly use:

http://detectmobilebrowsers.com/

Because the use of nginx in this article, just to download the Nginx configuration on the site can be.

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 the regular form to match the mobile device.

2, according to the device to adapt to different pages

First of all to prepare the site of the PC version and mobile version of the two sets of pages, through the previous inference to the device, to reverse the proxy to a different version number:

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

Assuming that 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

After the user opens the page, assume that you have entered the mobile version. It may be necessary to open the PC version because of the error inference device, or if the user wants to get a lot of other information. At the bottom of the mobile page, there will typically be a link to the PC version:

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

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

Add inferences in Nginx at the same time. If you include this cookie, enter the PC version:

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

4. Commissioning

After the above configuration, you can use the Chrome browser to simulate mobile phones, tablets and other devices.

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 site suitable for PC and mobile phone