Nginx Configure your Web site with PCs and mobile phones

Source: Internet
Author: User
Tags http request regular expression version client access

In view of the site's compatibility under a variety of devices, there are many sites will have mobile version and computer version of two versions. Access to the same Web site URL, when the server to identify users using a computer access, open the computer version of the page, users if the use of mobile phone access, you will get the mobile version of the page.

1, to determine the type of client equipment

To make your site fit with your PC and mobile device, you need to be able to make accurate judgments first. The user-agent in the header of an HTTP request can differentiate between the client's browser type and the client's device by User-agent.

Whether it's a PC or a mobile phone, it's not easy to make this judgment on your own because of the diversity of operating systems and browsers. Fortunately, there is a foreign open source through the user-agent to differentiate between PC and mobile solutions, can be directly used:

http://detectmobilebrowsers.com/

Because this article uses nginx, just download the Nginx configuration on the website.

Set $mobile _rewrite do_not_perform; if ($http _user_agent ~* "(androidbb\d+meego). +mobileavantgobada\/ Blackberryblazercompalelainefennechiptopiemobileip (HONEOD) Iriskindlelge maemomidpmmpmobile.+ Firefoxnetfrontopera m (obin) ipalm (OS) PHONEP Ixire (\/pluckerpocketpspseries) 0symbiantreoup\.

(browserlink) vodafonewapwindows Cexdaxiino ") {  set $mobile _rewrite perform;} if ($http _user_agent ~* "^ (1207631065903gso4thp50[1-6]i770s802sa waabacac (eroos\-) AI (Korn) Al (Avcaco) Amoian (EXNYYW) Aptuar (Chgo) as (TEUs) Attwau (di\-mr s) avanbe (CKLLNQ) Bi (LBRD) BL (ACAZ) br (EV) wbumbbw\-(NU) c55\/capiccwacdm\- Cellchtmcldccmd\-co (MPND) Crawda (ITLLNG) DBTEDC\-SDEVIDICADMOBDO (CP) ODS (12\-D) El (49ai) Em (l2ul) er (ick0) esl8ez ([ 4-7]0oswaze) Fetcfly (\-_) G1 Ug560genegf\-5g\-mogo (\.wod) gr (Adun) haiehcithd\-(MPT) Hei\-hi (Ptta) hp (IIP) Hs\-cht (c (\ -_AGPST) TP) hu (AWTC) i\-(20goma) i230iac (\-\/) IBROIDEAIG01IKOMIM1KINNOIPAQIRISJA (TV) ajbrojemujigskddikejikgt (\/) Klonkpt Kwc\-kyo (CK) LE (noxi) LG (g\/(Klu) 5054\-[a-w]) libwlynxm1\-wm3gam50\/ma (Teuixo) MC (0121CA) M\-crme (RCRI) mi (o8oats) mmefmo (0102bidedot (\-ov) ZZ) MT (50P1V) mwbpmywan10[0-2]n20[2-3]n30 (02 ) N50 (025) N7 (0) ne ((cm) \-ontfwfwgwt) NOK (6i) nzpho2imop (TIWV) Oranowg1p800pan (ADT) PDXGPG (13\-([1-8]c)) Philpirepl (AYUC) Pn\-2po (Ckrtse) PROXPSIOPT\-GQA\-AQC (0712213260\-[2-7]i\-) Qtekr380r600raksrim9ro (Vezo) S55\/sa ( Gemammmsnyva) SC (01h\-oop\-) sdk\/se (c (\-01) 47mcndri) Sgh\-sharsie (\-m) SK\-0SL (45id) SM (ALARB3ITT5) so (Ftny) SP (01h\ -V\-V) sy (01MB) T2 (1850) T6 (001018) TA (gtlk) Tcl\-tdg\-tel (IM) Tim\-t\-moto (plsh) TS (70M\-M3M5) tx\-9up (\.bg1si) Utstv400v750verivi (Rgte) VK (405[0-3]\-v) VM40VODAVULCVX (52536061708081838598) (\-) Webcwhitwi (g NCNW)

wmlbwonux700yas\-yourzetozte\-) "{  set $mobile _rewrite perform;} if ($mobile _rewrite = perform) {  # Mobile}

Nginx through the above configuration, obtains the HTTP request User-agent, uses the regular expression to match the handset device.

2, according to the equipment fit different pages

First of all to prepare the site's PC version and mobile version of the two pages, through the device before the judge, to reverse the proxy to a different version:

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

If a 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, if you enter the mobile version, may be due to the error to judge the device, or users want to get more information, may need to open the PC version. At the bottom of the mobile version of the page, there is usually a link to the PC version:

You can do this by using JavaScript to set up a cookie when you click on the "Computer version" link:

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

Also add a judgment to the Nginx configuration and enter the PC version if the cookie is included:

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

4, debugging

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

Finally, the complete nginx configuration is given:

Server {      Listen         set $mobile _rewrite do_not_perform;         if ($http _user_agent ~* "(androidbb\d+meego). +mobileavantgobada\/ Blackberryblazercompalelainefennechiptopiemobileip (HONEOD) Iriskindlelge maemomidpmmpmobile.+ Firefoxnetfrontopera m (obin) ipalm (OS) PHONEP Ixire (\/pluckerpocketpspseries) 0symbiantreoup\.
(browserlink) vodafonewapwindows Cexdaxiino ") {        set $mobile _rewrite perform;    }         if ($http _user_agent ~* "^ (1207631065903gso4thp50[1-6) I770s802sa WAABACAC (eroos\-) AI (Korn) Al (Avcaco) Amoian (EXNYYW) Aptuar (Chgo) as (TEUs) Attwau (di\-mr s) avanbe (CKLLNQ) bi (LBRD) BL (ACAZ) br (EV) wbumbbw\-(NU) c55\/capiccwacdm\-cellchtmcldccmd\-co (MPND) Crawda (ITLLNG) dbtedc\- SDEVIDICADMOBDO (CP) ODS (12\-D) El (49ai) Em (l2ul) er (ick0) esl8ez ([4-7]0oswaze) Fetcfly (\-_) G1 Ug560genegf\-5g\-mogo (\ . WoD) gr (Adun) haiehcithd\-(MPT) hei\-hI (Ptta) hp (IIP) Hs\-cht (c (\-_agpst) tp) hu (AWTC) i\-(20goma) i230iac (\-\/) IBROIDEAIG01IKOMIM1KINNOIPAQIRISJA (TV) AJBROJEMUJIGSKDDIKEJIKGT (\/) klonkpt Kwc\-kyo (CK) LE (noxi) LG (g\/(Klu) 5054\-[a-w]) Libwlynxm1\-wm3gam50\/ma (Teuixo) MC (0121CA) M\-crme (RCRI) mi (o8oats) mmefmo (0102bidedot (\-ov) ZZ) MT (50P1V) mwbpmywan10[0-2]n20[2-3]n30 () N50 (025) N7 (0) ne ((cm) \-ontfwfwgwt) NOK (6i) nzpho2imop (TIWV) Oranowg1p800pan (ADT) PDXGPG (13\-([1-8]c)) Philpirepl (AYUC) PN \-2po (Ckrtse) PROXPSIOPT\-GQA\-AQC (0712213260\-[2-7]i\-) Qtekr380r600raksrim9ro (Vezo) s55\/sa (Gemammmsnyva) SC (01h \-oop\-) Sdk\/se (c (\-01) 47mcndri) Sgh\-sharsie (\-m) SK\-0SL (45id) SM (ALARB3ITT5) so (Ftny) SP (01h\-v\-v) sy (01MB) T2 ( 1850) T6 (001018) TA (gtlk) Tcl\-tdg\-tel (IM) Tim\-t\-moto (plsh) TS (70M\-M3M5) tx\-9up (\.bg1si) Utstv400v750verivi (rgte
) VK (405[0-3]\-v) VM40VODAVULCVX (52536061708081838598) (\-) Webcwhitwi (g NCNW) wmlbwonux700yas\-yourzetozte\-) ") {
        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         }    }}


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.