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 : stackoverflow.com/questions/3680463/… — Ravi Sachaniya
– Ravi Sachaniya, Commented Feb 2, 2018 at 4: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 ^ m.domain.com%{REQUEST_URI} [R,L] — Priyank
– Priyank, Commented Feb 2, 2018 at 4:37
Antonio - You may want to look at developers.google.com/search/mobile-sites/mobile-seo and consider responsive design vs serving multiple versions of your site. — JasonB
– JasonB, Commented Feb 2, 2018 at 4:39

Kishor Velayutham · Accepted Answer · 2018-02-02 07:14:06Z

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 2, 2018 at 7:14

answered Feb 2, 2018 at 4:46

Kishor Velayutham

8286 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Antonio Over a year ago

Where to put that script and how I defined page inside if ?

Kishor Velayutham Over a year ago

@Antonio, are you using angular js or simple html?

Antonio Over a year ago

I use simple html

Kishor Velayutham Over a year ago

then use , window.location.href = "home-mobile.html"; after the if loop

Kishor Velayutham Over a year ago

Edited my answer check it @Antonio. Let me know if it works

|

Sarabjit Singh · Accepted Answer · 2018-02-05 04:21:02Z

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/

Collectives™ on Stack Overflow

Script to detect mobile browser

2 Answers 2

12 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Linked

Related