You might notice that some website have 2 different URL for mobile view and desktop view like Facebook. Facebook has m.facebook.com for mobile view and facebook.com for desktop view. Usually, the main website, they don’t care about responsive design. If customer want to well fit the in mobile view, just use the another website which only for mobile view like m.facebook.com (with subdomain of m indicate mobile).
In my opinion, for some reason why developers or companies separate their website responsiveness because building a responsive website is quite painful where need to maintain various of screens. If we separate it into mobile subdomain, we can just focus only on how in mobile UI looks like.
If you open your browser in your mobile phone, you may notice the “Desktop site” checkbox in the setting.
The checkbox “Desktop site” able to switch your browser user agent between mobile agent and desktop agent. If you open facebook.com, you will automatically redirect to m.facebook.com because the server detect your browser as mobile agent. But if you click “Desktop site”, you will be redirect to facebook.com site. Quite awesome right?
In this article, i will show you how we can make the same redirect as facebook do using Nginx.
Let’s get started
I would assumed that, you already have your website configured in Nginx.
Open your current Nginx setting. For the main website ex: example.com, I assumed your Nginx will look something like below
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name example.com;
root /var/www/example/public;
...
...
}Add another Nginx config for your mobile version ex: m.example.com,
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name m.example.com;
root /var/www/example-mobile/public;
...
...
}What we gonna do here is we need redirect from example.com to m.example.com and vice versa.
For example.com configuration, add below code anywhere inside server section.
The configuration should look like this
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name example.com;
root /var/www/example/public;
set $mobile_rewrite do_not_perform;
if ($http_user_agent ~* "(android|bb\d+|meego.....)) {
set $mobile_rewrite perform;
}
if ($mobile_rewrite = perform) {
rewrite ^ https://m.$server_name$request_uri redirect;
break;
}
...
...
}The explanation is by default we set a variable $mobile_rewrite to a value “do_not_perform”. You may change to suit with your understanding. For every request, Nginx will runs the If statement to check the user agent is consist mobile agent or not. If exist, change the value of $mobile_rewrite variable to “perform”. Nginx now notice the variable changes and run into another condition. When Nginx detect the variable is “perform”, it rewrite current url into mobile URL.
For m.example.com configuration, add below code anywhere inside server section.
The configuration should look like this
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name example.com;
root /var/www/example/public;
set $mobile_rewrite do_not_perform;
if ($http_user_agent ~* "(android|bb\d+|meego.....)) {
set $mobile_rewrite perform;
}
if ($mobile_rewrite = do_not_perform) {
rewrite ^ https://example.com$request_uri redirect;
break;
}
...
...
}Ok now, we are done!. its very simple approach to achieve. You may want to test if there is any nginx error.
> sudo nginx -t
If there is no error, restart your nginx service
> sudo service nginx restart
And all set and should be working fine at this point. Toggle the “Desktop site” button and you will the redirection.
References
If you want to achieve without using Nginx, go to this website http://detectmobilebrowsers.com/ and grab the code from there.
Found this helpful?
If this article saved you time or solved a problem, consider supporting — it helps keep the writing going.
Originally published on Medium.
View on Medium