Handling Magento store mobile view with string match design exceiption

To handle Magento mobile view, you may either add string match design exception or use separate mobile view Magento plugin. Separate mobile view through Magento plugin may bring cache implementation complexity and may require the code change, which is out of the scope of this wiki. This wiki will focus on how to achieve the mobile view through exact string match by adding design exception.

First, pick the preferred mobile Magento theme, such as default package bbdistributions template, or other theme.

Second, in the value field enter the name of your installed mobile theme.

Next, you should 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

To tell LiteMage to cache the website's Mobile version differently than the main version so they are not mixed up. Do this by adding the following to the .htaccess file (these are just some 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]

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

Important: Your rewrite rules must exactly match your backend's mobile detection. If these do not match, you may run into the issue where your rewrite rules think that a device is mobile while the backend does not and visa-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.