9
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 message, 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 implementation of isMobile()?
7
DON’T USE USERAGENT.
Really. No. Just not. Pass away.
If you go this way, you will only ensure that the day they launch a new browser, or when one of the current mobile browsers changes its value from user agent, your site will get all broken up for many people. I’ve seen this happen before.
There are two elegant ways to know if you should serve a mobile version of your site or not.
Check the screen size in hand. Kind 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, smaller cases, proof of concept maybe. Note that this form may be dated in a few years: if mobile phones keep the trend of having screen resolution increasing, this strategy will eventually stop working.
Use a library such as Modernizr, that has a functionality called "Feature detection". This is a much more elaborate way of knowing what the user’s browser can understand and render. It goes beyond determining only the size factor of the user’s device. Based on what you get when using the Modernizr API you define if and how it will serve some content.
Take a look at the documentation.
You can also use the Bootstrap to facilitate styling work. You can write a single HTML that automatically fits and looks beautiful on mobile, tablet, desktop and screen.
Edit: you say you would like to improve the user experience by putting or removing buttons, etc.
Maybe what you’re really interested in is knowing if the device has a touch screen, right? So you can serve an interface made to be played if there is support, and a clickable interface otherwise.
Many laptops nowadays have touch screen. I have one with a very large screen and run Windows and Chrome on it. Every site that uses the simple reading of user agent is already broken by default for me.
The correct way to verify this with Modernizr is:
var euDevoServirConteudoTouch = Modernizr.touch;
That’s much more accurate than reading the user agent, because then you know if the user will use a touch-sensitive device regardless of the device being mobile.
2
All previous answers are old, from 2017. Today, in 2021, there are other techniques to identify if the browser is being used by a mobile device.
If the browser supports UA-Client-Hint, you can simply use:
if (navigator.userAgentData != undefined && navigator.userAgentData.mobile) {
alert("é mobile");
}To test the above code, click "Inspect Element" and enable mobile mode, or log into this page on your mobile.
For now, Itso is only available for Google Chrome 89 (and equivalent versions of Opera and Microsoft Edge). Other browsers can implement this in the future, you can see more information on https://www.chromestatus.com/feature/5995832180473856.
2
On the website Detect Mobile Browsers you can download code corresponding to several 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 So-En has a number of ways, including with regex in this other question.
Follow one more example:
window.onload = function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
console.log('Dispositivo Movel');
}
}1
To check if a user is accessing from a mobile device, use the condition below:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Seu código
}Then just fit that condition into your code which, in this case, is more up to you.
Browser other questions tagged javascript mobile browser
You are not signed in. Login or sign up in order to post.