PDA

View Full Version : Mobile Website Detection



jcdesigns
12-05-2012, 03:25 PM
I recently read where a credit union website system can detect that you are coming from a web enabled smartphone and automatically redirect you to their mobile site. In other words they automatically display their mobile website instead of their computer website on a smartphone. How is this possible? Thanks

Beverleyh
12-05-2012, 03:42 PM
http://detectmobilebrowsers.com/

bernie1227
12-05-2012, 07:47 PM
http://detectmobilebrowsers.com/

Unfortunately, that method does not function correctly on devices such as ipad (it thinks its not a mobile browser, where I'm pretty sure it is)
Take a look here (http://stackoverflow.com/questions/1005153/auto-detect-mobile-browser-via-user-agent)

djr33
12-05-2012, 08:18 PM
Mobile browsers used to be very limited in features and on black and white, perhaps text-only displays. Thus, there was a need to strictly separate them. That lasted for a while (even as colors and some graphics started to work, but other things like Javascript were limited), and may even be true today for some limited feature smart phones.
But with something like an iPad, other tables, and the best smart phones, they actually have fully function browsers without any significant differences (no more than, say, between Firefox and Internet Explorer and Chrome on a computer, or on a Mac and Windows for any of those).

Especially with the iPad, it's just Safari, exactly as on the computer, but operating on a mobile device.


So... the question you need to ask first is which set of "mobile browsers" you want to target. Is there any reason Safari on an iPad shouldn't go to the full site? Why a mobile site?

The difference is no longer between "mobile" and "desktop", but instead between features, most of the time related to input, and sometimes small screen sizes.

So you might want to check if the "click" event is possible, to see whether you can have a certain kind of menu. It's not possible on touchscreen devices (at least not very accessible, even if it's technically included).
Likewise, if you're worried about having tiny displays on screens, then you might want to check for a small screensize-- iPhones but NOT iPads. And so on. (But do remember zooming is easy on many smart phones, so it may not be necessary to have a separate site.)


Personally I'm in favor of having a combined site when possible and just designing it to work everywhere. Mobile devices are moving toward being able to work with that web as-is, rather than the web needing to change to work on mobile devices.


In short, what exactly do you want to separate? Beverley's link is one possible solution if it fits what you're looking for. If you're looking for something more specific, a good idea would be to use Javascript to detect features-- screensize, the "touch" or "click" events, and so forth, and direct them accordingly.


And remember that in the case of touchscreen devices they actually have MORE features (in some ways) than a desktop computer. So now it's more of alternatives/variation than one just being a bad version of the other.