Single URL to detect Web vs Web App

Question

Hi,

How could I apply some js file to detect the device (mobile or desktop) to use the same URL (for user) and get web version in desktop and webapp in mobile browser.

Is there a best practice to do it? Any sample?

 

Best regards,

Felipe

Answer 1

The most common way to do this would be by checking the User Agent of the browser.

Here are some examples using JavaScript:

var isMobile = navigator.userAgent.match(/Mobile|iP(hone|od|ad)|Android/ig);

var isIOS = navigator.userAgent.match(/iP(hone|od|ad)/ig);

You could then use location.assign() or location.replace() to update the page, e.g.,

var mobileSite = '../mobile/index.html';
var isMobile = navigator.userAgent.match(/Mobile|iP(hone|od|ad)|Android/ig);
if(isMobile) location.assign(mobileSite);

This is just sample code, you would have to customize it to your own needs.

Also, server-side code (such as PHP) would be a much stronger approach because it could all be done behind the scenes without relying on JavaScript (but the underlying idea would be the same).