How can I detect mobile devices (and / or mobile cookies) without scripting (PHP) or server configuration (Nginx)?

We are launching a mobile version of our site very soon. Our complete website and mobile site differ only in theme, i.e. The URLs are the same, the only difference is in the interface.

We need to be able to do the following when a user visits our site:

1. Check the cookie (mobile == true OR false) to determine if a full or mobile preference has already been determined (by the user manually or by detection at our end).

2. If a mobile cookie is not set, locate the user device in the first page view mode and set the mobile cookie to true or false.

3. Submit relevant experience, complete or mobile, based on results # 1 and / or # 2.

I originally used PHP to detect devices that work great. However, our site uses extreme full HTML caching on the home page, and some other pages (.html files are written to a folder in our network root directory, and if Nginx finds them, they are served instead of the request passing through the PHP cache, it is cleared every 15 minutes ), so I can’t rely on PHP to discover a mobile device from our main user entry point (as far as I know at this point ...).

Unable to rely on PHP, I put the mobile cookie check and device discovery into the Nginx configuration file (Apache is locally for me during development, translated by our server for Nginx). Nevertheless, our server management staff returned to us, saying that the performance obtained from the new Nginx configuration file will be great (and “performance hit” is a 4-letter word in our office).

Mostly they tell me that the full HTML caching on the main page should remain in place and that I can’t change the Nginx configuration file at all. Is there any other way to detect cookies / devices that I could use, given the limitations above?

+4
source share
2 answers

You can use javascript.

Try the following: http://detectmobilebrowsers.com/

+6
source

I used this neat trick with CSS requests and JavaScript in the past ...

Before closing your site, the <body> :

 <div id="mobiledetect" style="display: none;"></div> 

In your CSS file:

 @media screen and (max-device-width: 768px) { #mobiledetect { text-transform: uppercase; } } 

In your JavaScript file (depends on jQuery, but you can change it):

 $(function() { $is_mobile = false; if($('#mobiledetect').css('text-transform') == 'uppercase') { $is_mobile = true; } }); 
+2
source

All Articles