Handling Magento Store Mobile View With String Match Design Exception

To enable a mobile view in Magento, you may either add a string match design exception or use a separate mobile view Magento plugin. To use a Magento plugin for a separate mobile view may bring cache-implementation complexity that requires a change to the code. This is out of the scope of this wiki.

Let's focus on how to achieve the mobile view through an exact string match by adding design exceptions:

1. Pick the preferred mobile Magento theme, such as the default package's bbdistributions template, or other theme.
2. In the value field enter the name of your installed mobile theme.
3. Add exceptions for the mobile devices: Navigate to the Magento administrative area System → Configuration → Design → Themes. Click on the Add Exceptions buttons beside the Templates, Skin and Layout labels. Enter the following line in the Matched Expression field:

iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone

Like so:

LiteMage needs to cache the website's Mobile version differently than the main version so that mobile pages are not served to desktop users or vice-versa. Add something like the following to the .htaccess file (these are examples only and you may have your own rules):

RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone"
RewriteRule .* - [E=Cache-Control:vary=ismobile]

Note: Don't add [NC] to the end of RewriteCond since in Magento code, the design exception is a regular expression match and is case sensitive.

Important: Your rewrite rules must exactly match your backend's mobile detection. If these do not match, your rewrite rules may think that a device is mobile while the backend does not (and vice-versa). This can cause, for example, the desktop version of a page to be cached and flagged as the mobile version which will then be wrongly served to all mobile viewers.