Using Mobile Device Detection

If you are using a responsive design, you don't need device-detection on the server side. Most of Webvanta's SmartThemes use the responsive design approach, using the Boostrap framework.

There are times, however, when it is better to deliver entirely separate pages to mobile devices. Webvanta's server-side mobile device detection makes it easy to provide a separate set of pages that are automatically served to mobile devices.

For instance, a request to

http://www.webvanta.com/about

is automatically (and transparently to the user) redirected to

http://www.webvanta.com/mobile/about

if mobile redirection is enabled.

Certain kinds of pages (such as CSS, JavaScript, and binary files such as images) are NOT redirected, allowing you to continue to reuse common assets (and their locations) with the mobile versions of the pages.

Enabling Mobile Redirection

Mobile redirection is OFF by default.

To activate the mobile redirect feature, create a Global Setting called admin.mobile.redirect_on and set to true.

How It Works: The Details

A request is first processed by the Webvanta web server (nginx) layer. Mobile related checks are made after a request has had its subdomain (or domain) resolved, and account specific web server layer redirects have occurred, after secure folder access checks, and after rendition (image file) request resolution.

The algorithm used by the mobile checker in the web server layer is as follows:

1. Check user agent for existence of known mobile platforms, and if found set flag that a mobile candidate is found.
2. Check to see if the request is coming in on a subdomain of mobile.mycanonical.com or m.mycanonical.com. If so, set flag that a mobile candidate is found.
3. Don't do redirect processing if any of the following is true:
   • The special bypass cookie “wv_mobile_mode” is set to “full”
   • The request path starts with the root slug of /mobile
   • The request is considered “binary media” (e.g. images, movies, similar kinds of documents)
   • The request is for a CSS, JS, JSON, or XML file
4. Otherwise, prepend the /mobile prefix to the request URI and redirect.

Note: POST requests are always passed on to the app layer, so the web server layer does NOT redirect such requests.

After the mobile checks, the query continues through cache processing.

Processing in the App Server Layer

When a request is received by the Webvanta app server (which happens only when the web server is not able to fulfill the request from the cache), it is double-checked to see if it is coming from a mobile device. A similar set of filters as applied at the web server layer is used.

The application will attempt to locate the /mobile/uri page for rendering. If a version is not found under the full path, then Webvanta will select the page with the same slug name if it is the only such page in the system. Otherwise, it will return the not_found (404) page.

For the best user experience, you should provide a mobile-specific 404 page. To do so, just create a page with the slug of not_found_mobile and put in under your /mobile page.

Special Page Considerations

The home page (slug of /, the “empty” slug), maps to the /mobile page.

The /access_denied (401) page does not force a redirect. You should structure this page so it can be used on any platform.

The initial slugs of /a, /admin, /dashboard, and /search are currently bypassed from mobile detection (the first three are all admin control panel slugs, and reserved. The latter one is a legacy search engine path).

Mobile pages have different paths than your other pages, so if you are using any relative paths inside of a page, and that page is located through “slug sniffing”, you will want to change those relative paths to absolute paths (start with a /) in your CSS, JavaScript, and other asset references.

Since this mechanism does a redirect, be careful to note your new path if doing any kind of URL manipulation or you have relative references in your pages (e.g. CSS or JavaScript might not work in that case).

Hiding Webvanta Features in CMS pages on Mobile Devices

Mobile pages should generally not include the Webvanta bootstrap JavaScript and toolbar. You can turn that off by creating a template for your mobile pages that include the “wv-no-features” class in the html tag.

Link to Full Site

Sometimes, you want your visitors to be able to access the full web site from a mobile device. You can use the cookie “wv_mobile_mode” to force the full site to be shown, bypassing the redirect mechanism in the web and application layers. If you set this cookie while on a /mobile pathed page, you will need to redirect to the regular pathed page.

Set wv_mobile_mode to full to have the mobile redirect be ignored regardless of user agent or subdomain. Any other value will permit the redirection.

The code below, for example, will set the cookie whenever a link with the class view-full-site is clicked.

<script>
  $("#mobile-page-").live('pageshow', function(psevt) {  
    $('.view-full-site').click(function(event){
      event.preventDefault();
      $.cookie('wv_mobile_mode','full', {expires:1, path:'/'}); 
      document.body.style.display = "none";
      window.history.pushState("Going to Desktop Site", "Site Name Here", "/");
</script>

Webvanta Control Panel

The Webvanta control panel is not optimized for mobile devices, and control-panel-related paths will NOT trigger redirect behavior. Note this includes any fall back pages, such as the default system login page (at /a).