h1

Device Detection Problems in AEM5.6 on Windows 8

April 13, 2013

When exploring AEMs default website geometrixx or geometrixx-media with a Windows8 device that has a touch screen (some of the newer laptops on the market for example)  you are either forwarded to a .tablet.html page (geometrixx) or the mobile site (geometrixx-outdoors). This seems to be a problem with the device detection that is part of AEM5.6. A tool called BrowserMap is used to perform a client slide test to determine your type of device and then you are redirected based on your device and a set of settings on the site.

The documentation from Adobe on how to set up your site for device detection can be found here

To see what AEM thinks your device is, you can go to http://localhost:4502/etc/mobile/browsermap/detect.html – with a Windows 8 Laptop with touch screen and Chrome you will get something like this as the output:

browsermap-debug

As you can see, the detection thinks the browser is running on a tablet.

Looking at the /content/geometrixx/jcr:content/cq:siteVariant node and the /content/geometrixx_mobile/jcr:content/cq:siteVariant node they both have a cq:variantFamily property with the value ‘geometrixx’. For the main website the media property is set to ‘browser, oldBrowser, highResolutionDisplay’, for the _mobile site to ‘smartphone, tablet, highResolutionDisplay’ – for whatever reason, this is not a String Array property but just a comma separated list and the node type is nt:unstructured – cq:siteVariant is the actual name that the browser detection is looking for.

What’s interesting to me is that on geometrixx, a selector called tablet is added and the browser stays on the same page while the setup in geometrixx-outdoors seems to be the same but there the browser is redirected to the mobile version of the site.

You can force AEM to use a specific device and bypass the BrowserMap detection by adding the parameter device=[device group name] to the URL. The supported device groups by default are:

  • smartphone
  • tablet
  • highResolutionDisplay
  • browser
  • oldBrowser (the latest version of Firefox is considered an oldBrowser)

The BrowserMap library is available on github at https://github.com/raducotescu/browsermap. The testpage that’s available within AEM is also available online at http://raducotescu.github.com/browsermap/index.html – the library in AEM seems to be a bit more up to date since it can detect IE10 on Windows 8 (although it thinks that it does not have touch capabilities) – the one on github just reports it does not know the browser.

On the bright side, geometrixx-media does not need the browser detection since it’s a responsive design based website. I highly recommend going that route.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: