Script to detect mobile browser

Question

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.

may this link be helpful : https://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess — Ravi Sachaniya, Feb 02 '18 at 04:37
RewriteEngine On # Check for mime types commonly accepted by mobile devices RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC] RewriteCond %{REQUEST_URI} ^/$ RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L] — Priyank, Feb 02 '18 at 04:37
Antonio - You may want to look at https://developers.google.com/search/mobile-sites/mobile-seo/ and consider responsive design vs serving multiple versions of your site. — JasonB, Feb 02 '18 at 04:39
@ravisachaniya on that link they use **m.example.com** and I don't want to do that. — Antonio, Feb 02 '18 at 04:40
@Antonio you have make some modifications to get desired output. — Ravi Sachaniya, Feb 02 '18 at 04:41
@Priyank I know that code redirect to **m.example.com** but I do not want redirect to other domain — Antonio, Feb 02 '18 at 04:41

Kishor Velayutham · Answer 1 · 2018-02-02T07:14:06.830

1

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..!

edited Feb 02 '18 at 07:14

answered Feb 02 '18 at 04:46

Kishor Velayutham

818
6
18

Where to put that script and how I defined page inside if ? – Antonio Feb 02 '18 at 04:48
@Antonio, are you using angular js or simple html? – Kishor Velayutham Feb 02 '18 at 04:49
I use simple html – Antonio Feb 02 '18 at 04:51
then use , window.location.href = "home-mobile.html"; after the if loop – Kishor Velayutham Feb 02 '18 at 04:55
Edited my answer check it @Antonio. Let me know if it works – Kishor Velayutham Feb 02 '18 at 04:59
I tried to called that script in `head` but nothing happen. – Antonio Feb 02 '18 at 05:16
OK.Did you try the updated one? Put alert and see whether the function s getting called or not? – Kishor Velayutham Feb 02 '18 at 05:19
Updated code is working @Antonio.I have verified it. check this. Increase the output screen and run you can see it : Have a look https://jsfiddle.net/KishorVelayutham/rbe055uq/ – Kishor Velayutham Feb 02 '18 at 05:23
It's working but I still have one problem. If the browser is mobile the URL going to **www.example.com/home-mobile.html**. What I want is the URL is same **www.example.com** and just the page load `home-mobile.html` – Antonio Feb 02 '18 at 05:25
Then,you have to apply .htaccess rules. Let me try that as well. If i answer is helpful,pls click the tick. – Kishor Velayutham Feb 02 '18 at 05:31
Could you give me how to put in `.htaccess` ? – Antonio Feb 02 '18 at 05:40
That needs to be done on server side @Antonio.I will give it on JS. Try it . I'm not sure it will work . Have a look. var link = 'home-mobile.html'; link.split('.html')[0]; window.history.replaceState( null, null, link ); – Kishor Velayutham Feb 02 '18 at 05:44

score 0 · Answer 2 · answered Feb 05 '18 at 04:21

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/mobile-detect@1.4.1/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/

Script to detect mobile browser

2 Answers2