Nginx performs different jumps according to the mobile computer

Sometimes we want to handle visits to the same page from different platforms. For example  https://www.iteblog.com/test.html , if the access page is accessed by the browser of the computer, it will not be processed directly; but if the browser of the mobile phone accesses this page, we want to jump to other pages. There are several ways to achieve this:

  • processing directly through JavaScript;
  • Handle with Nginx configuration

This article only describes how to implement it through Nginx configuration. How to deal with it through JavaScript, please search the Internet by yourself.

Identify the platform

The first problem of this requirement is how to identify the platform of access, that is, to correctly identify the computer browser and the mobile phone browser. There are many similar codes on the Internet. Mainly through  $http_user_agent judgment, the code is as follows:

set $is_mobile no;
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 $is_mobile yes ;
}
 
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 $is_mobile yes ;
}

The above code first sets  $is_mobile the parameter as  no, and then judges the browser  $http_user_agent; if the above two conditions are met, the platform that can be accessed is the mobile terminal, and the  $is_mobile parameter is at  this time yes.

Identify visited pages

Above we have identified the user's platform, now we need to identify the address of the page we are currently visiting. We can   obtain the address of the page accessed by the user through  the built-in   (or through  implementation) of nginx . For example, if you visit the   page now, the following is  and  the   information obtained:$document_uri$request_urihttps://www.iteblog.com/test.html?from=iteblog_hadoop&id=123445$request_uri$uri$document_uri

  • $request_uri: /test.html?from=iteblog_hadoop&id=123445
  • $uri: /test.html
  • $document_uri: /test.html

It can be seen that  $request_uri the variable can obtain the parameters for accessing the page; and  $uri similar  $document_uri to the function, the current URI without the request parameters is obtained, excluding the host name. So we can judge that the currently accessed page is test.html as follows:

if ( $document_uri ~* "(test)\.html.*" ) {
   // 访问了 test .html 页面
}

Now that we have obtained the user access platform and the page accessed, we can combine these two conditions for related processing. But unfortunately, if in nginx  does not support and operation, so we need special handling. For this specific introduction, please refer to  "nginx: Implementation of if Logical Operation (&&, ||)" . All final implementations are as follows:

set $con 0;
if ($is_mobile = "yes" ) {
     set $con 1;
}
 
if ( $document_uri ~* "(test)\.html.*" ) {
     set $con "${con}0" ;
}
 
if ( $con = "10" ) {
     rewrite ^/ https: //www .iteblog.com /mobile .html permanent;
}

The logic above is:

  • When the platform we visit is a mobile phone and the page we visit is test.html, then $con = 10
  • When the platform we visit is a mobile phone and the page we visit is not test.html, then $con = 1
  • When the platform we visit is a computer, and the page we visit is test.html, then $con = 00
  • When the platform we visit is a computer, and the page we visit is not test.html, then $con = 0

Finally, we just need to restart nginx. Now if you access  https://www.iteblog.com/test.html the page from a computer, nginx will not make any jumps; but if you access the page through the mobile phone's browser, nginx will jump to the  https://www.iteblog.com/mobile.html page with 301.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324696437&siteId=291194637