Identify if the device is pc or mobile and use a different code for each

Question

I want it to be automatic if the person is on the computer display a code if they are on the phone display a different one. I do not want to change the resolution but all the content presented on the page. Example: If it’s mobile: You are connected by a mobile phone! if by computer you are connected by a PC!

Someone give me a light?

Answer 1

Simply put, you can use this function to detect if it is mobile:

function detectar_mobile() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

Or wear something more professional:

function detectar_mobile() {
  var check = false; //wrapper no check
  (function(a){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)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}

---

EDIT

Solution for Tablets using detectmobilebrowsers.com:

Android tablets, iPads, Kindle Fires and Playbooks are not Detected by design. To add support for tablets, add |android|ipad|playbook|Silk to the first regex.

---

EDIT 2

Another option (possibly the best option) is to use WURFL:

if (WURFL.is_mobile === true && WURFL.form_factor === "Smartphone") {
    // moblie
} else {
    //nao mobile
}

Just a detail about his license:

You can use These services free of Charge, as long as your website is publicly available and does not require fees or paid Subscription to access.

Answer 2

Do not try to detect if your device is mobile or desktop via browser, this is less reliable than checking for majority in porn site entry. Chrome itself mobile has an option to pass through Chrome desktop, and it’s not even an advanced option. It’s in the application’s basic menu.

If you try to determine if a device is mobile by user agent browser, the only thing you will guarantee is that new mobile browsers will not receive the mobile experience when accessing your website.

If you try to determine if the device is a mobile phone by its capabilities (i.e.: detect if the device supports touch), you will get bizarre results. My laptop, for example, is touch sensitive. Imagine a site with a mobile layout rendered on a screen of 15". That’s when I don’t plug it into television...

The correct way to develop pages is to be agnostic about the type of device. Serve layout based on resolution, but so it automatically fits to the window without having to reload the page. This is possible with bootstrap, for example, so I recommend it.

Regarding Javascript, detecting if the browser is mobile is an even worse practice. Just because certain functionality has problems in a cell phone model does not mean that it will have the same problems in another model, and vice versa. So either you deprive all users of current mobile browsers of something that would be interesting, or you serve potentially broken functionality for everyone. It is best to determine which javascript features to serve based on the device’s capabilities, not based on the browser name. There are libraries that help a lot in this. I recommend modernize.

Answer 3

I found this on the web, I tested it and it worked:

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var devices = new Array('nokia','iphone','blackberry','sony','lg',
'htc_tattoo','samsung','symbian','SymbianOS','elaine','palm',
'series60','windows ce','android','obigo','netfront',
'openwave','mobilexplorer','operamini');
var url_redirect = 'http://mobile.seusite.com';
function mobiDetect(userAgent, devices) {
for(var i = 0; i < devices.length; i++) {
if (userAgent.search(devices[i]) > 0) {
return true;
}
}
return false;
}

if (mobiDetect(userAgent, devices)) {
window.location.href = url_redirect;
}
</script>

Where is "http://mobile.seusite.com" and just put your website or Directory you want.

Answer 4

Use screen.width to catch the width of the screen

var largura = screen.width;

if( largura <= ? ) {  

       //   
}

This information you need to confirm:

• Tablets and phones have 767 width down

• Phones have the width of 480 down