CODEWITHSUNDEEP
javascripthttp-redirectmobile
user1193358
user1193358

Reputation: 11

Redirecting when not on a mobile device

I'm in the process of building a single mobile-optimized page with a contact-form and a receipt-page. In our CMS we have a "desktop"-page with the same content, but I am not able to edit the desktop-page in terms of CSS, redirect or anything of the sorts.

The mobile-page is going to be used for a mobile-only campaign. However, I'd like to make sure, that should someone end up on the page from a desktop or a tablet, they'd be redirected to the desktop-version instead.

I've seen scripts of this sort:

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>

But hey, mobiles have much higher resolutions these days, so making a reverse "if >=699 then redirect to desktop-site", probably won't work for me, will it? Samsung Galaxy s 3 almost has desktop resolution... Using media queries is not really an option, seeing as this is two seperate sites (due to the old, rigid CMS). So how do I redirect non-mobile and tablet users, while anyone on any mobile phone stays on the mobile-page page.

Please note - our servers don't run PHP and I cannot makes changes in server-side files. I need something JavaScript-ish I think.

Upvotes: 1

Views: 2908

Answers (3)

Miki Shah
Miki Shah

Reputation: 815

// To Check if Mobile browser,then redirect to mobile version website otherwise open web url.
    //alert(navigator.userAgent); 
        // userAgent gives all info related to browser,os,device info

     var index = navigator.appVersion.indexOf("Mobile");   

    if (index>0) 
    { window.location.href='[mobile page url]'; }

Upvotes: 0

jAndy
jAndy

Reputation: 235962

I never really understood why so many people are looking for detecting "mobile devices". As front-end dev, you actually shouldn't are about the such called mobile devices as much as you're looking for browser-vendors and that is, not at all.

Why not checking for capabilities instead? Create a dynamic, progressive enhanced web-app which adapts to its current environment. Doesn't matter if that means touch-events or standard-events, screen resolution or other things.

However, if you persist on checking for browsers or devices, your best shot still is the userAgent string located in the navigator object, see @MihaiIorga's answer.

However, we should really try to avoid those "sepparation" in entirely different apps/projects for browser and/or devices. I understand the point if there already is a more or less "huge" application or site which needs to work proberly on another device in a very short amount of time, but on the long run you won't do much good with that practice. Many more devices / browsers (versions) / {things I can't think of} will get released in the future.

Upvotes: 0

Mihai Iorga
Mihai Iorga

Reputation: 39704

here is a nice snippet that I use:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

if (isMobile.any()) {
    window.location = 'http://m.example.org';
}

Upvotes: 3

Related Questions