I have a web application with AngularJS, where I need to know if the user is on a mobile device to improve their experience, putting buttons to make calls, send messages, etc.
I have a directive that will display an element from this test:
var isMobile = DetectDeviceService.isMobile();
The big question is what should I test to detect any kind of mobile device?
How should the isMobile() implementation be?
DO NOT USE USERAGENT.
Seriously. No. Not just. Pass away.
If you go this route, you will only ensure that the day you launch a new browser, or when one of the current mobile browsers changes its user agent value, your site will stay all broken for a lot of people. I've seen this happen before.
There are two elegant ways to know whether you should serve a mobile version of your site or not.
Check the screen size at hand. Like this:
if (screen.width < 640 || screen.height < 480) {
// sirva a versão pra celular
} else if (screen.width < 1024 || screen.height < 768) {
// talvez seja uma boa usar versão pra tablet
} else {
// sirva a versão normal
}
This form is for small, small cases, proof of concept perhaps. Note that this form may be dated in a few years: if your cell phones continue to tend to have higher screen resolution, this strategy will eventually stop working.
Use a library like Modernizr , which has a feature called "feature detection" . This is a much more elaborate way of knowing what the user's browser can understand and render. It goes beyond just determining the user device size factor. Based on what you get when using the Modernizr API you define whether and how some content will serve.
Take a look at the documentation.
You can also use Bootstrap to make styling easier. You can write a single HTML that fits automatically and looks great on your mobile, tablet, desktop, and big screen.
Edit: You say that you would like to improve the user experience by putting or removing buttons, etc.
Maybe what you're really interested in is whether your device has a touch screen, right? So you can serve an interface made to be touched if supported, and a clickable interface otherwise.
Many laptops nowadays have a touch screen. I have one with a very large screen and squeeze Windows and Chrome in it. Every website that uses the simple user agent is already broken by default for me.
The correct way to check this with Modernizr is:
var euDevoServirConteudoTouch = Modernizr.touch;
This is much more accurate than reading the user agent , so you know if the user will use a touch sensitive device regardless of whether the device is mobile.
At Detect Mobile Browsers you can download the code corresponding to several of the most famous and relevant languages on the market.
Javascript code taken from the site.
(function(a, b) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) window.location = b
})(navigator.userAgent || navigator.vendor || window.opera, 'http://detectmobilebrowser.com/mobile');
In this question > in So-En has a number of ways, including with regex in this other question .
Here's another example:
window.onload = function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
console.log('Dispositivo Movel');
}
}To verify that a user is accessing from a mobile device, use the following condition:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Seu código
}Then just fit this condition in your code, which in this case is more with you.