Mobile detection and supporting older devices - mobile

Question

How to identify, when user coming to website with some older phone (not smartphones and iPhones). I'm using jQuery-Mobile with Joomla 1.7.
I use this script:
<script type="text/javascript">// <![CDATA[
var mobile = (/acer|alcatel|audiovox|avantgo|blazer|cdm|digital paths|elaine|epoc|handspring|iemobile|kyocera|lg|midp|mmp|mobile|motorola|nec|o2|openwave|opera mini|operamini|opwv|palm|panasonic|pda|phone|playstation portable|pocket|psp|qci|sagem|sanyo|sec|sendo|sharp|smartphone|symbian|telit|tsm|up-browser|up.browser|up.link|vodafone|wap|windows ce|xiino|ericsson|sonyericsson|iphone|ipod|android|blackberry|samsung|nokia|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "http://mysite,com/mobile";
}
// ]]></script>
Site works well with HTC, iPhone, Nokia and so on.
My friend tested with some Ericsson (don't know the model), but site wont work. It shows only PC site, not mobile.

Answer 1

Here are 3 ways to detect mobile...
Community Supported Browser Sniffing through the WURFL project
Custom Browser Sniffing (what you're doing now, quite common though not considered a best practice)
Detecting through feature support.
Option 1: Will probably get you the best overall support if you're really looking to support non-smartphones. This is done on the backend by checking the user agent against a massive database of known devices that is regularly updated by the community. Since it does not rely on JavaScript, it's probably the best way to support absolutely everybody.
Option 2: People on non-smartphones know that surfing web on them sucks. They are therefor less likely to use them for the web. As a percentage of traffic, the percentage of people you will be missing by using detection in JavaScript is probably not worth talking about. For the sites that I have seen, it's been less than 2% on BlackBerry 5 or older and less than 1% for anything else that wasn't Android, iOS, or BlackBerry 6+. I've supported this method of detection before and here is how I did it. Note the allowance for any webkit based option provided the screen is small (isUnknownMobile). This is an attempt at future proofing until such a platform could gain enough traction to be called out.
<script>
var agent = navigator.userAgent;
var isWebkit = (agent.indexOf("AppleWebKit") > 0);
var isIPad = (agent.indexOf("iPad") > 0);
var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
var isAndroid = (agent.indexOf("Android") > 0);
var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
var isWebOS = (agent.indexOf("webOS") > 0);
var isWindowsMobile = (agent.indexOf("Windows Phone OS") > 0);
var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
var isUnknownMobile = (isWebkit && isSmallScreen);
var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
var isTablet = (isIPad || (isMobile && !isSmallScreen));
function mobileRedirect(mobileView){location.replace((mobileView)?mobileView:"/mobile/index.jsp");}
</script>
Option 3: Feature detection is probably a far more future proofed way of testing if a client is mobile. Consider using the Modernizr Project to see what features are supported. For example, if the device has a small screen and supports canvas, or if it has a touch interface, they're probably mobile. Again, this is front-end based detection and relies on JavaScript.
If you're really looking to redirect EVERYONE who is mobile, the WURFL project is your best bet.

Answer 2

Does the phone support JavaScript?
If not you could use this workaround (if it doesn't affect the UX of your website):
Create a div-container, which is overlaying the whole site
Type in a description (e.g. "This site provides a mobile version") and a link
Hide the div with JavaScript if it not a mobile device or a supported one

Answer 3

This is something i use in my code to check for mobiles
function checkScreen()
{
if (screen.width <= 1000 && screen.height <= 1000)
window.location.replace("MobileURL");
else
window.location.replace("URL");
}
Basically you check the screen res of the client. If it is really low you just redirect to the mobile. you can change the params to be smaller screen if you like.