Mobile Design Configuration – Configuring Design ‘Exception’ Strings for Mobile Devices

configurationdesignmobile

What Exception strings are "state of the art" for redirecting iPhone, iPad, Android, tablet, etc. users to a different design?

That is, I realize in the

System -> Configuration -> Design

user interface, there's a feature that allows me to create a regular expression that's matched against the user agent string. What I'm looking for is what specific strings people are using to redirect non-desktop computers to a different mobile and/or response theme?

Or is there a better approach than the "Exception" approach to take these days?

Best Answer

There are two different versions which we have used. The first is the same one which @Marius made mention of minus the specific "Fennec" mention (which is no longer in the UA string of FF Mobile). I got it from similar sources:

iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini

The second is the same, but with the term "Mobile" removed so that the mobile version of a site is not served to the iPad, which includes Mobile in it's user agent. Apple even makes a point to call this out in TN2262:

Safari on iPad is capable of delivering a "desktop" web experience, and users will expect this experience since iPad has a large screen and fast network connectivity. If you have a version of your website that is optimized for mobile devices with small screens, do NOT serve this mobile version to iPad users.

...

Note that the Safari on iPad user agent string contains the word "Mobile", but does not contain the word "iPhone". If you are currently serving mobile content to any browser that self-identifies as "Mobile", you should modify your user agent string checks to look for iPad and avoid sending it the wrong version of your site.

Based on what I see on the FF Mobile, using "Android" in this string will cause trouble if you want the desktop theme served to all tablets (and not just iPads) since it's been decided to include it in the UA string for various reasons.

I've honestly not personally tested the coverage of the above strings. I do know this: It's a complicated mess! :)

Note: If you are setting this up on EE 1.12 or earlier (haven't checked 1.13) you will need a patch from Magento Support for the FPC to work properly. It fails to take design exceptions into account in the release build.

Update 1:

The noted bug requiring a patch for design exceptions to work still exists in EE 1.13.0.0 and 1.13.1.0. There is a patch available from Magento support and it's on their known issues list: SUPEE-1598

Related Solutions

Magento – Magento Redirect to mobile website when on Smart Devices

Magento has this built-in already:

enter image description here

http://www.molotovbliss.com/iphone-magento-theme-compatible-with-android/

UPDATE:

Apologizes for missing the redirecting portion of your question, most likely you'll want to take a look at something like a lightweight php class to use in your index.php to determine such. If you can avoid the headaches of regular expressions with .htaccess, its always best.

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. http://mobiledetect.net

Magento – Magento 2 – 3rd level menu items collapsed on mobile devices

Okay, I came up with a solution. It may not be ideal, but it works for me. Hopefully somebody will find it useful.

It will depend on the base theme you're using, but first of all I had to comment out this line in styles-m.css:

.navigation .submenu:not(:first-child).expanded {
  // display: block !important;
  ...
}

In my own mobile stylesheet, that's set to the same breakpoint as where the responsive menu kicks in, I have this:

li.level0 ul {
  display:none;
}
li.level0 ul a {
  position:relative;
}
.rm-expand {
  float:right;display:block;font-family: 'icons-blank-theme';font-size:42px;position:absolute;right: 7px;top: -6px;
}

Then finally, in my Javascript file I have:

require(['jquery', 'jquery/ui'], function($){
  // ... Irrelevant code omitted ...
  $(document).ready(function() {
    // ... Irrelevant code omitted ...
    $('li.level0 li.parent > a').append('<span class="rm-expand">&#58914;</span>');
    $('.rm-expand').click(function() {
    if ($(this).hasClass('open')) {
      $(this).parent().parent().find('ul:first').slideUp();
      $(this).removeClass('open');
      $(this).html('&#58914;');
    } else {
      $(this).parent().parent().find('ul:first').slideDown();
      $(this).addClass('open');
      $(this).html('&#58913;');
    }
    return false;
  });
  // ... Irrelevant code omitted ...
});

Best Answer

Related Solutions

Magento – Magento Redirect to mobile website when on Smart Devices

Magento – Magento 2 – 3rd level menu items collapsed on mobile devices

Related Topic