I have a special responsive mobile store at m.MYdomain.com - how to make Magento detect mobile devices and forward the traffic to m.Mydomain.com?

Question

I've setup a subdomain = m.MYdomain.com with a Porto reponsive theme which is fully responsive (it seems to do a good job detecting the screen size and formatting the website accordingly). The reason I've setup m.myDOMAIN.com is so that I can include less text and way less products on the front page than I actually have on the front page of the desktop version. The point is - I don't need anything fancy (like detecting the actual size of the mobile device) but just differentiate:

Is this a desktop the customer is using or a mobile device (phone, tablet) and if it detects a mobile device then - transfer the traffic to m.MYdomain.com

I'm sure there is a simple script I could just paste somewhere in the Magento Admin panel to make this happen?

So to clarify once again:

• I've set up a new Magento store for our mobile site (under the same WEBSITE as the desktop version)
• I need to implement some logic to switch between the store views based on the client browser (maybe?) or detect if it's a computer or a mobile device they are using...

Magento 1.9.1

Answer 1

How to Accomplish This:

You will want to utilize the "Miscellaneous Scripts" box for your non-mobile store (System Configuration > Design > HTML Head).

Then, use a script, similar to:

if (screen.width < 600 && document.cookie.indexOf('force_desktop') === -1) {
    window.location = "https://m.mydomain.com" + window.location.pathname;
}

What this Script Does:

This script will check two things: 1) is the width of the screen less than 600px? 2) is there a cookie that doesn't indicate forcing the desktop mode? If so, it will redirect to your sub-domain.

Keep in mind that while this works, it isn't ideal. This approach requires loading an entire page just to determine whether or not to redirect. For mobile users, this means a punishment of an extra page load (and their download times on average are slower).

Other Thoughts:

This answer is for strictly checking screen size (which is consisten with how responsive sites are built). If you are open to other approaches, I would recommend:

• Looking through the theme's CSS files to see if you can wrap text in a </div> tag to hide id, such as: <div class="hidden-text"><p>A lot of text here.</p></div>. This is the best approach in that your site is truly responsive.
• Using an .htaccess to filter based on device type. I would not recommend this as it isn't foolproof.

Finally:

As a side note, you could make future site visits faster by: * Setting a cookie in the same box, but on the mobile store: document.cookie = "is_mobile_site=1;domain=mydomain.com" (important to note that you need to specify the main domain name and not the sub-domain. * Editing the .htaccess file to watch for is_mobile_site set and force_desktop is NOT set. Example: https://stackoverflow.com/questions/15097662/htaccess-redirect-to-folder-if-cookie-is-missing.