Jump to content
Read the Funtoo Newsletter: Summer 2023 ×
  • entries
    2
  • comments
    3
  • views
    39,061

Mobile Detection on Tengine / Nginx

uudruid74

Entry posted by uudruid74

7,314 views

 Share

If you use a content management system for your site, it probably already deals with mobile systems. But, what if you have parts of your site that aren't in a CMS, or you do your site by hand?

 

Well, it would be nice to either redirect from www.example.com to m.example.com, or (my preference), to redirect to a subdirectory. I like the subdirectory approach because I can easily share content with the main site via symlinks (such as the content management system). Normally, this isn't a nice thing to do to your caches since any caches along the way won't know that the symlinked files aren't the same, but if you can solve that, let me know.

 

The following method redirects the user if they are on a mobile browser, but still allows them to use the "Request Desktop Site" feature. Just include the file in your tengine or nginx server configuration. The actual rewrite is done at the end. Scroll to the bottom and you'll see the line to edit. I tried to attach the file, but it said I'm not permitted to upload files of that type. Cut-Paste or email me and I'll send it to you.

>#- This file for doing redirects based on mobile detectionset $mobile_rewrite do_not_perform;#- chi http_user_agent for mobile / smart phonesif ($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|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|phone)|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;}set $force_dt_cookie "";if ($args ~ 'desktop=true') {set $mobile_rewrite do_not_perform;set $force_dt_cookie "desktop=true";}add_header Set-Cookie $force_dt_cookie;if ($http_cookie ~ 'desktop=true') {set $mobile_rewrite do_not_perform;}location /m {error_page 404 /m/error/404.html;}#- redirect to /m except /m, /mail, /joomlaif ($mobile_rewrite = perform ) {rewrite ^(?!(/m|/joomla)+) /m$request_uri? break;break;}#- To redirect to m.example.com, change above rewrite to# rewrite ^ https://m.example.com$request_uri? break;

That's it! I just put my mobile files in the /m directory of the server.

 Share

3 Comments

Recommended Comments

uudruid74

Oh, it wasn't the point to do a whole website.  That's what /joomla was for.  Yes, I could make the whole site in joomla, but that still leaves little details like custom error pages.   I wanted a method that was simple, no javascript, no external frameworks to learn, that would handle the static /index.html and error pages and anything else that I felt I wanted to add outside the joomla framework.  Yes, if designing a large website, its better to use dynamic content rather than colorful webserver tricks (hence why the title is "tricks" and not "best practices").  However, I hope people will make sure that they handle that "Request Desktop Site" checkbox in whatever solution they choose.  I should be able to click that checkbox and turn my phone sideways to get the exact same site as on a desktop.

 

In fact, things like error pages should display properly on a mobile but shouldn't use javascript or contain any sort of dynamic content.   I'm really thinking of adding a "Contact" page that is outside the Joomla CSS.  Too often I see sites that are broken, and you can't get into the site to reach the Contact page to tell the owner its broken.  Some things should be simple, and I'm NOT going to learn any of those frameworks you mention.  Thats for web developers.  I'm not!

Link to comment
uudruid74

m. subdomain is an outdated technique to deal with mobile websites.  use bootstrap unsemantic foundation or another mobile css framework.

 

OK ... here's a question for you.  How do you detect if a user is using a handheld?   In most cases, you don't need to know.  But what if you actually needed to know to hide certain elements, such as instructions to press a particular key combination or something that made no sense on a handheld.

 

CSS defines @media handheld for this purpose, but browsers don't support it!  I ended up making 2 CSS files, one I dropped into my /m folder using the above.  This lets nginx do the browser detection and return which CSS sheet to give to the user.  99% of the CSS is a different file which is symlinked to appear in both directories.

 

It may not be an elegant solution, but if anyone knows of another way to do handheld detection, I'd love to hear it!  And I like the nginx hack better than using javascript.  This is more or less pure CSS.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...