Web Redirect by Screen Resolution for Mobile Devices

Overview

Redirect a website visitor to a mobile site or page based on screen resolution using Javascript.

The method outlined below is ideal for sites where mobile content does not mirror primary content.  It is not the preferred method for sites using a content management system (e.g., WordPress, Drupal, et al.) where a mobile plug-in (operating at the CSS and/or template level) would be a better alternative.

Requirements

  • Web host with FTP access
  • A mobile-friendly, domain name (typically containing fewer characters than a primary domain)
  • An associated subdomain like m.yourdomain.com or alt.yourdomain.com (optional)

Installation

  1. Backup data.
  2. Make sure the directory on the web server corresponds to the domain to be redirected.
  3. Save the following page template as index.html, index.htm or index.php and upload it to the appropriate folder (directory) on the server:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>Your Mobile Domain - Redirect Page</title>

    <script type="text/javascript">
    if (screen.width<800)
    {
    window.location="http://yourdomain.com/mobile/"
    }
    else
    {
    window.location="http://yourdomain.com/"
    }
    </script>

    </head>
    <body>

    <h1>Hello, World!</h1>
    <p>
    This site requires Javascript.<br />
    If you are not redirected, please see below.
    </p>

    <h2>Main Menu</h2>
    <p>Which version would you like to view?</p>
    <ul>
    <li><a href="http://yourdomain.com/mobile/" title="Mobile Version">Mobile Edition</a></li>
    <li><a href="http://yourdomain.com/" title="Full Version">Desktop Edition</a></li>
    </ul>

    </body>
    </html>

  4. Replace http://yourdomain.com/mobile/ and http://yourdomain.com/ with addresses that correspond to the mobile and desktop versions of a website, respectively.
Notes

This technique has been tested using a laptop, a flip phone (not a smartphone/PDA) and an iPod Touch.  An iPad device should redirect to the desktop version because its resolution is greater than “800” as set in the Javascript in #3.  However, the latter has not been tested.

 

Advertisements

One Response to “Web Redirect by Screen Resolution for Mobile Devices”

  1. Brian Says:

    How would you set it up if you wanted it to return to the same site that redirected it to the mobile page. As in, I want it to return to the index page

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s


%d bloggers like this: