Redirection based on page title/ location

Question

i am trying to get my Online Help to redirect to a phone version. However, i am generating the phone and desktop versions from a single source so I want to have a piece of code that does it each way (phone <-769-> desktop). I got the redirection due to size happening using:

if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";

but when I was on the phone page it kept trying to load the page (i can see why). I had a go myself but I am new to this, here is my (failed) attempt:

windowWidth = window.innerWidth;
<!--
if (location.pathname = "/desktop/Selecting_a_School_Register.htm";) 
{
} else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";

}
</script><script>
if (location.pathname = "/phone/Selecting_a_School_Register.htm";) 
{
} else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";

}

Generally speaking your web server should be the one responsible for serving the mobile pages. This is accomplished by parsing the Http User Agent. Any javascript based solution is going to be slow, a pain to maintain, use more bandwidth(due to an additional page load), and be harder to maintain in the future as it is expected to be done server side. It can also straight up fail to work with new changes depending on your caching configuration. — Deadron, Oct 17 '13 at 14:25

score 1 · Answer 1 · edited May 23 '17 at 12:05

Any type of conditional statement needs a double '==' as opposed to a single '=' like your code example suggests. Also, you don't need a semi-colon after your string in your if statements.

Even better than a double equals is a triple equals which is a strict comparison operator

Try this:

windowWidth = window.innerWidth;

if (location.pathname === "/desktop/Selecting_a_School_Register.htm") {
} 
else if (screen.width <= 769 || windowWidth <= 769) {
    window.location = "../phone/Selecting_a_School_Register.htm";
}

if (location.pathname === "/phone/Selecting_a_School_Register.htm") {
} 
else if (screen.width >= 769 || windowWidth >= 769) {
    window.location = "../desktop/Selecting_a_School_Register.htm";
}

EDIT:

This code does exactly what you need:

var pathname = window.location.pathname
  , width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

if (width <= 769 && pathname !== '/mobile.html') {
    window.location = '/mobile.html';
}

if (width > 769 && pathname !== '/desktop.html') {
    window.location = '/desktop.html';
}

This has improved my situation a little, however, when i try to load the page it keeps trying to reload the page, I think it is ignoring first if statements or just the phone/desktop parts....any thoughts? — George Woodiwiss Hill, Oct 17 '13 at 11:40

score 0 · Answer 2 · answered Oct 17 '13 at 14:20

Hi,

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

Example :

To check to see if the user is on any of the supported mobile devices:

if( isMobile.any() ) alert('Mobile');

To check to see if the user is on a specific mobile device:

if( isMobile.iOS() ) alert('iOS');

Thank you, Vishal Patel

Redirection based on page title/ location

2 Answers2