Configure your website to adapt to PCs and mobile phones

: This article describes how to configure your website to be compatible with PCs and mobile phones. For more information about PHP tutorials, see. Considering the compatibility of websites on multiple devices, many websites have two versions, mobile and computer. Access the same website URL. when the server identifies a user using a computer to access the website, the page of the computer version is opened. if the user uses a mobile phone to access the website, the page of the mobile version is displayed.

1. determine the device type of the client

To adapt websites to PCs and mobile devices, you must first make accurate judgments. The User-Agent in the HTTP request Header can differentiate the browser type of the client. The User-Agent can be used to determine the device of the client.

Whether it is PC or mobile phone, it is not easy to realize this judgment by yourself due to the diversity of operating systems and browsers. Fortunately, there is an open-source User-Agent solution in foreign countries to distinguish between PCs and mobile phones, which can be directly used:

Http://detectmobilebrowsers.com/

As Nginx is used in this article, you only need to 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 | Eline | 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 | too so | 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 \-| weight (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) | 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) {# mobile phone}

Nginx obtains the User-Agent of the HTTP request through the above configuration and uses a regular expression to match the mobile phone device.

2. adapt to different pages based on the device

First, you must prepare two sets of pages for the website's PC version and mobile phone version, and use the previous device judgment 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 Edition }}

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

location / {root /html/pc;if ($mobile_rewrite = perform) {root /html/mobile;}}

3. link the mobile phone version to the PC version

After the user opens the page, if the user enters the mobile phone version, the device may be incorrectly judged, or the user wants to obtain more information, the user may need to open the PC version. At the bottom of the mobile phone version page, there is usually a link pointing to the PC version:

You can use JavaScript to set a Cookie when you click the "computer version" link:

Computer Edition

In addition, add a judgment in the Nignx. if this Cookie is included, it enters the PC version:

if ($http_cookie ~ 'gotopc=true') {set $mobile_rewrite do_not_perform;}

4. debugging

After completing the preceding configuration, you can use the Chrome browser to simulate devices such as mobile phones and tablets.

Finally, complete Nginx configuration is provided:

Server {listen 80; set $ mobile_rewrite do_not_perform; if ($ http_user_agent ~ * "(Android | bb \ d + | meego ). + mobile | avantgo | bada \/| blackberry | blazer | compal | Eline | 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 | too so | 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 | f Ly (\-| _) | 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 \-| weight (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) | m I (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) | 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 ; # PC edition if ($ mobile_rewrite = perform) {proxy_pass http://192.168.20.2 ; # Mobile phone version }}}

The above describes how to configure your website to adapt to PCs and mobile phones, including content, and hope to be helpful to friends who are interested in PHP tutorials.