Mobile URL Redirect and Desktop URL Redirect

Question

I need help please? I want to make my website that has a desktop and a mobile version. The CSS coding of styling to the correct widths of HTML elements are easy but a URL is harder. I want to know is that how to make a URL that leads to a home page on desktop but on mobile the URL is different but it goes to the same home page as the desktop version but in the mobile version. Do you know if there is any code that can do that with out getting any errors on previewing it privately. I don't mind if your answers are using PHP or JavaScript etc.

This is a code that i tried to use. I wasn't sure if it worked or not. Can't say it possibly did.

$(document).ready(function() {
    $(window).on("load resize", function() {
        if($(window).width() <= 950) {
            var mobile = window.location = "/mindex.php";
            console.log("The location is " + mobile);
        } else if($(window).width() > 950) {
            var desktop = window.location = "/index.php";
            console.log("The location is " + desktop);
        } else {
            var defaultPlace = "";
            console.log("Defualt location: " + defaultPlace);
        }
    });
});

Can you please help me? Remember, I would like some help on making a mobile redirect URL and a desktop URL but that will both lead to the same page but in different versions please.

Answer 1

You can use user-agent header sent by the browser to check whether the user is mobile user or desktop user and redirect according to the returned value. You can check user-agent header using this -

var usrAgent = navigator.userAgent;

Now you know the user agent, check the returned user-agent is mobile or not and redirect accordingly -

function detectMobile() 
{
    if(usrAgent.match(/Mobile/i))
    {
        return "Mobile";
    }
}

var isMobile = detectMobile();

if(isMobile)
{
    window.location = "MOBILE_URL";
}
else
{
    window.location = "DESKTOP_URL";
}

Alternatively,

You can use html link tag to redirect to any webpage according to user device width using this -

<link rel="alternate" media="only screen and (max-width: 640px*)" href="MOBILE_URL_TO_REDIRECT">

*Change this width according to your requirement. 640px is the ideal max width for mobile devices.

I hope this solves your problem.