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. Navigate to the Magento administrative area: System → Configuration → Design → Themes.
2. Pick the preferred mobile Magento theme, such as the default package's bbdistributions template, or other theme.
3. Click on the Add Exceptions buttons beside the Templates, Skin and Layout labels.
4. In the Value fields enter the name of your installed mobile theme.
5. Enter the following line in the Matched Expression fields:

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 (i.e. the string you entered in Step 5 above). 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.