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 top of the .htaccess file (these are examples only and you may have your own rules): 

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

Important Notes

  • 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.
  • The above rule must be placed at the very top of the .htaccess file to avoid other rules stopping its execution.
  • 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.

Troubleshooting

Desktop Version Showing on Mobile

This case illustrates the importance of placing rewrite rules at the top of the .htaccess file.

Let's say you've set up a mobile view in the Magento 1.8 backend, like so, and have verified that the mobile view is working fine.

After enabling LiteMage, you add rewrite rules to the bottom of your .htaccess file, and use the exact same user agent string that you used above in the Magento backend setup. However, with LiteMage enabled, the desktop version is showing on mobile. Why? 

<IfModule Litespeed>
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} "android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|iP(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|(Android.+Mobile)|NOKIA|SymbianOS|N900|BlackBerry"
RewriteRule .* - [E=Cache-Control:vary=ismobile]
 </IfModule>

The above rules should have been added to the beginning of .htaccess. Other rules, like RewriteRule .* index.php [L], stop the cache rules from being executed. Cache rules should be always be placed on the very top of the .htaccess file.

Relocate the rules to the top, like so, and everything works: 

	<IfModule Litespeed>
	LiteMage on
	RewriteEngine on
	RewriteCond %{HTTP_USER_AGENT} "android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|iP(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|(Android.+Mobile)|NOKIA|SymbianOS|N900|BlackBerry"
	RewriteRule .* - [E=Cache-Control:vary=ismobile]
        </IfModule>

	############################################
	## uncomment these lines for CGI mode
	## make sure to specify the correct cgi php binary file name
	## it might be /cgi-bin/php-cgi

	#    Action php5-cgi /cgi-bin/php5-cgi
	#    AddHandler php5-cgi .php

	############################################
	## GoDaddy specific options

	#   Options -MultiViews

	## you might also need to add this line to php.ini
	##     cgi.fix_pathinfo = 1
	## if it still doesn't work, rename php.ini to php5.ini

	############################################
	## this line is specific for 1and1 hosting

		#AddType x-mapp-php5 .php
		#AddHandler x-mapp-php5 .php

	############################################
	## default index file

		DirectoryIndex index.php

	<IfModule mod_php5.c>

	############################################
	## adjust memory limit

	#    php_value memory_limit 64M
		php_value memory_limit 256M
		php_value max_execution_time 18000

	############################################
	## disable magic quotes for php request vars

		php_flag magic_quotes_gpc off

	############################################
	## disable automatic session start
	## before autoload was initialized

		php_flag session.auto_start off

	############################################
	## enable resulting html compression

		#php_flag zlib.output_compression on

	###########################################
	# disable user agent verification to not break multiple image upload

		php_flag suhosin.session.cryptua off

	###########################################
	# turn off compatibility with PHP4 when dealing with objects

		php_flag zend.ze1_compatibility_mode Off

	</IfModule>

	<IfModule mod_security.c>
	###########################################
	# disable POST processing to not break multiple image upload

		SecFilterEngine Off
		SecFilterScanPOST Off
	</IfModule>

	<IfModule mod_deflate.c>

	############################################
	## enable apache served files compression
	## http://developer.yahoo.com/performance/rules.html#gzip

		# Insert filter on all content
		SetOutputFilter DEFLATE
		# Insert filter on selected content types only
		AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

		# Netscape 4.x has some problems...
		BrowserMatch ^Mozilla/4 gzip-only-text/html

		# Netscape 4.06-4.08 have some more problems
		BrowserMatch ^Mozilla/4\.0[678] no-gzip

		# MSIE masquerades as Netscape, but it is fine
		BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

		# Don't compress images
		SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

		# Make sure proxies don't deliver the wrong content
		Header append Vary User-Agent env=!dont-vary

	</IfModule>

	<IfModule mod_ssl.c>

	############################################
	## make HTTPS env vars available for CGI mode

		SSLOptions StdEnvVars

	</IfModule>

	<IfModule mod_rewrite.c>

	############################################
	## enable rewrites

		Options +FollowSymLinks
		RewriteEngine on

	############################################
	## you can put here your magento root folder
	## path relative to web root

		#RewriteBase /magento/

	############################################
	## uncomment next line to enable light API calls processing

	#    RewriteRule ^api/([a-z][0-9a-z_]+)/?$ api.php?type=$1 [QSA,L]

	############################################
	## rewrite API2 calls to api.php (by now it is REST only)

		RewriteRule ^api/rest api.php?type=rest [QSA,L]

	############################################
	## workaround for HTTP authorization
	## in CGI environment

		RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

	############################################
	## TRACE and TRACK HTTP methods disabled to prevent XSS attacks

		RewriteCond %{REQUEST_METHOD} ^TRAC[EK]
		RewriteRule .* - [L,R=405]

	############################################
	## redirect for mobile user agents

		#RewriteCond %{REQUEST_URI} !^/mobiledirectoryhere/.*$
		#RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC]
		#RewriteRule ^(.*)$ /mobiledirectoryhere/ [L,R=302]

	############################################
	## always send 404 on missing files in these folders

		RewriteCond %{REQUEST_URI} !^/(media|skin|js)/

	############################################
	## never rewrite for existing files, directories and links

		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteCond %{REQUEST_FILENAME} !-l

	############################################
	## rewrite everything else to index.php

		RewriteRule .* index.php [L]

	</IfModule>


	############################################
	## Prevent character encoding issues from server overrides
	## If you still have problems, use the second line instead

		AddDefaultCharset Off
		#AddDefaultCharset UTF-8

	<IfModule mod_expires.c>

	############################################
	## Add default Expires header
	## http://developer.yahoo.com/performance/rules.html#expires

		 ExpiresActive On
		 ExpiresDefault "access plus 1 year"

	</IfModule>

	############################################
	## By default allow all access

		Order allow,deny
		Allow from all

	###########################################
	## Deny access to release notes to prevent disclosure of the installed Magento version

		<Files RELEASE_NOTES.txt>
			order allow,deny
			deny from all
		</Files>

	############################################
	## If running in cluster environment, uncomment this
	## http://developer.yahoo.com/performance/rules.html#etags

		#FileETag none

	###########################################
	## Deny access to cron.php
		<Files cron.php>

	############################################
	## uncomment next lines to enable cron access with base HTTP authorization
	## http://httpd.apache.org/docs/2.2/howto/auth.html
	##
	## Warning: .htpasswd file should be placed somewhere not accessible from the web.
	## This is so that folks cannot download the password file.
	## For example, if your documents are served out of /usr/local/apache/htdocs
	## you might want to put the password file(s) in /usr/local/apache/.

			#AuthName "Cron auth"
			#AuthUserFile ../.htpasswd
			#AuthType basic
			#Require valid-user

	############################################

			Order allow,deny
			Deny from all

		</Files>
  • Admin
  • Last modified: 2019/07/10 19:24
  • by Lisa Clarke