[Enhancement] Mobile Browser Detection

[GoogleCodeExporter]

Currently PWM looks at the max-device-width: 480 to determine whether the 
mobile CSS should be applied to the JSP's. This seems to be working OK for 
older and/ or lower spec Smartphones.

However, nowadays a lot of Smartphones are pushing up resolution besides 
pushing up the pixel density. This leads to problems with the current detection 
mechanism for i.e. Iphone4 which has a max-device-width of 960 (pixel ratio of 
2-1).

This results in the style.css being applied on a really tiny pixel dense screen.

There are two ways to get this fixed:

- beside max-device-width we could use min-device-pixel-ratio to detect high 
end phones
- use the user-agent as a primary detection mechanism and fallback to the 
max-device-width

I've chosen to make use of the user-agent detection, because it is easier to 
implement (you don't have the issue with the device-pixel-ratio battle that is 
going on) and it shouldn't change that often. The regexp originates from Detect 
Mobile Browsers (http://detectmobilebrowsers.com/).

Attached a patch.

Original issue reported on code.google.com by sebastia...@gmail.com on 27 Jun 2013 at 3:11

Attachments:

• pwm-issue-413.diff

[GoogleCodeExporter]

1) I think trying to detect if a user-agent is a "mobile" device is going to be 
a loosing battle.

2) I think dojo already has libraries for this, so if we go device-detection 
route maybe a dojo module will do.

3) My guess is that theres a way somehow to do it on physical screen 
width/size, instead of pixels... but i haven't looked into it yet.  Maybe if we 
stick with pixels and just set the size to about 620, it will work because the 
main css assumes width of about 600 + some for the margins.

Thoughts?

Original comment by jrivard on 12 Sep 2013 at 7:24

[GoogleCodeExporter]

Thanks for your feedback on this. The cat-mouse game with mobile device 
detection is indeed never ending, but the same applies when using Dojo 
libraries. I had a look at The Dojo has() API, but it seems that 
dojox/mobile/sniff is not well documented. Ofcourse a single Javascript toolkit 
would be preferable.

Ideal would be, to set the PWM interface based on the physical width/ size, but 
I'm not aware of any technology that could achieve this within a mobile browser 
(so please enlighten me :). If we stick with pixel detection only, we will 
still have a cat-mouse game: the device pixel ratio seems to go higher with 
each new serie of mobile devices. Although the Main CSS is ok with a width of 
620 pixels, the interface is not well suited for use on a mobile device.

Original comment by sebastia...@gmail.com on 24 Sep 2013 at 7:24