Automatic Mobile Redirection

Detection & redirection script for smartphones

jQuery automatic mobile redirection script. This script automatically redirects smartphone viewers from your desktop version website to your mobile version. Will not redirect tablet or surface computers. Free Download: This script is available free to anyone who has purchased any Allwebco web template. Please contact us to request the script download with step by step instructions. Please include a link to your website.

Order script
This script is FREE if you have purchased any Allwebco template (details above), or you can purchase below to use this on any type of website or web templates from other companies.

Redirects to the mobile website

Automatic Smartphone Redirection - $8.00
Script download is automatic after payment is completed.

Script details
Instructions & Support Included: The redirection script download uses jQuery code and will automatically redirect smartphones to your mobile version website. It does not redirect tablets. Works on any website, HTML5, HTML 4.01 and responsive designs.

A mobile version uploaded on your website is required. It can be located inside a folder in your hosting account (usually named "mobile"), or it can be on another domain. You can add the script to select pages on your top level site, like the homepage only, or it can be added to all of your webpages.

See Also:

More redirection options
Redirecting mobile devices can be done either automatically using the script outlined above, or a passive css type redirection can be used.

Automatic — script: When using automatic mobile redirection users will not be able to view the desktop site and will always be automatically redirected. Automatic redirection uses jQuery code to detect if the device is a smartphone. jQuery is a library of Javascript functions. In other words this is a Javascript application.

Passive — css: With passive redirection, a user selection box will pop up allowing the user to select to either visit the dedicated smartphone version website, or they can optionally choose to visit the desktop version instead. Passive redirection uses css and Media Queries css code to detect the viewing screen device width and pop up a selection box overlay when it detects a screen smaller than 482 pixels wide. The 482 is called a "breakpoint" and the breakpoint width is editable in the css code.

View Applications:

Important SEO
It's very important to include a visible link to your mobile website on your main or "top level" desktop version website so search engines can see and index all your mobile webpages inside the "mobile" folder. Include this link even if you are adding automatic redirection. The link can be either a text link or a linked image or button. The code should be something like the following, linking into the "mobile" folder homepage:

<a href="mobile/index.html">View Mobile Version</a>

Mobile Website Plugin
Mobile Version Add-on
Custom Built Mobile

Hiding the "View Non-Mobile" website links & button
With the auto-redirect jQuery script, smartphone users will always automatically be redirected back to the mobile site as intended, however, you may want to keep the link and button on your mobile site in case a desktop users ends up on the mobile website. To hide the links and buttons on mobile:
  1. Check in your "media-queries.css" or in your "style-mobi.css" and see if you have the following class:

    .hidemobile { display:none; }

    If you do NOT have this class, copy the above code and add it to your css file in the "/*** Media Queries" section. Either inside the 640 or 482 screen section before the "END Media Queries" like the following. (It is not a problem to have this class twice).

    .hidemobile { display:none; }

    END Media Queries

    It is added in the Media Queries section so it will only be active when the screen width is 482 or 640.

  2. Now you can add this class to the homepage menu button and hide it on smartphones. Add the class like the following:

    <div class="menu-mobile hidemobile">
    <a href="../index.html" class="menulink-mobile">View Non-Mobile Site</a>

    ...Or in some mobile templates it may instead look like the following:

    <a href="../index.html" class="menulink-mobile hidemobile">View Non-Mobile Site</a>

  3. To add it to the homepage layered icon, add the class like the following:

    <div class="non-mobile left-div hidemobile">
    <a href="../index.html"><img src="picts-mobi/non-mobile.png" width="110" height="33" class="left-div" alt="Image"></a><br>

  4. To add it to, for example, a text link on the site map:

    <a href="../index.html" class="hidemobile">View Non-Mobile Site</a><br>

    Or optionally place a div around the link like the following:

    <div class="hidemobile">
    <a href="../index.html">View Non-Mobile Site</a><br>