Magento Mobile Tutorial

Magento Mobile Tutorial for Magento webstore owners

Magento Mobile Browser Detection

Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

Magento Mobile Browser Detection - SIMICART

Magento Mobile Browser - Simicart 

You may consider this script as being part of the RESS (Responsive Web Design with Server-Side Component) movement. You can find out more on the topic by reading these articles: Improve Mobile Support With Server-Side-Enhanced Responsive Design and RESS: Responsive Design + Server Side Components.

You can also benefit from Mobile Detect by using any of the 3rd party plugins available for: Wordpress, Drupal, Joomla, Magento, etc.

When working with magento, developers usually meet the problem with mobile device. The thing is there are some javascript need to run different in mobile device and developers don’t know extension will be install in desktop theme or mobile theme and which device it is working in. There are 3 ways to detect mobile device in jQuery.

1. Detect Mobile Device with simple javascript

Even though your code don’t include jQuery, developers still have chance to detect mobile device with very simple code

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // You are in mobile browser
}

or you can combine them both to make it more accessible through jQuery…

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

2. isMobile function

For the code reuse later on you can use this object, developers can save it as a js file for your source code library

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

As you see, it ‘s quite simple to use

if(isMobile.any()) {
   // It is mobile
}

3. TouchEvent to detect mobile device

Maybe the simplest way to detect mobile device is not base on the browser name but base on the event what browser support. Let ‘s use these code line to figure out

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

SimiCart is a new product of Magestore - the top 3 Magento extension provider. It is a M- Commerce solution that helps online merchants create Mobile Shopping App automatically for both iOS (iPhone, iPad) and Android. 

How will the Mobile Shopping App created by SimiCart look like?

  • It is native app: all the apps created by SimiCart are native app, which runs fast, smoothly and directly onto users’ mobile. 
  • It is shopping app: every feature, button, navigation… of your app is designed to help your customers search, browse and purchase products easily on the go.
  • It is fully integrated with your Magento store through a Connector: never have to worry to manage two businesses: mobile and web. They are 100% synced.

You can see the full list of features HERE or try our demo app to have a better imagination of your app built by SimiCart. Android version - iOS version


Related Terms
magento mobile detect, magento mobile app, magento mobile app builder, mobile shopping app

Related Posts