webpage redirect

How to Make a Website Detect Mobile Device OS and Redirect to Mobile Page

Coding & Programming

Basically 80% of people across the world access the internet with mobile devices. This means that if you are building any webpage, you have to make sure it is very responsive and mobile friendly. Another way to make users using mobile devices enjoy your website is to create an app for the website which users can just tap on to access your page.

It is important to note that just building a webpage that is very mobile friendly and an app for it doesn’t do the trick because the webpage may appear differently in the various mobile OS available today. The solution i believe to this is to create a landing page for each of the available mobile OS and then redirect users to such page when they visit the webpage with the device.

To achieve this, we shall be making use of a JavaScript code to detect mobile device or browser and redirect visitors to the specific landing page meant for that device OS. Below is a guide on how to add the JavaScript code to your website;

  • First, open index.html file in any text editor.
  • Search for the <head> tag in the header section of the index.html file.
  • Copy the JavaScript code below and paste just after/below the <head> tag
<script language="javascript"> 
  if(!window.location.search.substring(1) == "full=true") {  
    if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) { // detect mobile browser
      window.location.replace("http://example.com/mobile-page.html");  
    }
  }
</script>
  • Finally save your file and you are done.

How the JavaScript Code Works:

Once a user visits your webpage with a mobile device, the code helps the webpage detect the type of mobile device OS and thus redirects the user to the landing page you have created for that mobile device OS.

Leave a Reply

Your email address will not be published. Required fields are marked *