Antonio
Antonio

Reputation: 765

Script to detect mobile browser

I hava a problem with opened page in desktop and mobile browser. In this case I have site which name is www.example.com and I have to files of page called home-desktop.html and home-mobile.html. What I want to do is when I open www.example.com on desktop browser it will load home-desktop.html and if I open in mobile browser it will load home-mobile.html. What script I should insert into my head section to do that ?

Please anyone know to do this can help me. Thank you.

Upvotes: 0

Views: 2606

Answers (2)

Sarabjit Singh
Sarabjit Singh

Reputation: 103

Alternatively, you can use a js library that handles this part perfectly well and is very easy to use. Simple usage to check browser:

<script src="//cdn.jsdelivr.net/npm/[email protected]/mobile-detect.min.js"></script>
<script>
    var md = new MobileDetect(window.navigator.userAgent);
    // ... see below
</script>

Other options available:

var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');

// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding

console.log( md.mobile() );          // 'Sony'
console.log( md.phone() );           // 'Sony'
console.log( md.tablet() );          // null
console.log( md.userAgent() );       // 'Safari'
console.log( md.os() );              // 'AndroidOS'
console.log( md.is('iPhone') );      // false
console.log( md.is('bot') );         // false
console.log( md.version('Webkit') );         // 534.3
console.log( md.versionStr('Build') );       // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false

I found it really helpful. Hope you too. Credits: http://hgoebl.github.io/mobile-detect.js/

Upvotes: 0

Kishor Velayutham
Kishor Velayutham

Reputation: 818

you can use simple javascript to detect it:

<script>
       window.mobilecheck = function() {
           var check = false;
           if(window.innerWidth<768){
               check=true;
           }
           return check;
         }
         if(window.mobilecheck()){
             window.location.href="home-mobile.html";
         }
         else {
            window.location.href="home-desktop.html";
         }
</script>

Working fiddle: https://jsfiddle.net/KishorVelayutham/rbe055uq/

Hope it helps..!

Upvotes: 1

Related Questions