« Psuedo 'Slide Show' - Displaying and Hiding divs
Fly High - JetScripts »

Mobile Device HTML Page - Detect and Redirect

First, the device must be identified so the correct content can be served.

An .htaccess file can be used, or these settings can be placed in httpd.conf (or an included .conf file). This is an Apache 1.3 version, 2.+ may be slightly different.


# Set the MIME type
AddType "application/xhtml+xml;charset=utf-8" .html

# This handles the redirection
RewriteEngine On

# Don't redirect requests for images
RewriteRule \.(gif|jpe?g|png)$ - [L]

# Test for the user agent.  Mozilla is used to indicate a non-mobile device
# A more complex RewriteRule would be required for a production environment
# http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones is a good list
RewriteCond %{HTTP_USER_AGENT} !^Mozilla.*

# Use this page for mobile devices
RewriteRule .* wap.html       [L]

# Otherwise process the request normally

In this case, the page is a very simple page, to let people know that they need to use a browser to visit the page.



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
                content="application/xhtml+xml;charset=utf-8" />
<meta http-equiv="Cache-Control" content="max-age=86400" />
<title>site.com</title>
<style type="text/css">
body
{
font-family:verdana,arial,sans-serif;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body>
  <h1>Welcome to my.site.com</h1>
  <p><img src="icon64x64.gif" alt="logo" title="logo" height="64" width="64" /></p>
  <p>Please visit my.site.com from a laptop or desktop.</p>
</body>
</html>

Validate the code using the link above to ensure it displays well in most devices.

A different approach, using a .jsp is at: https://core.forge.funambol.org/wiki/HowToMakeAMobileOKPageForThePortal, a similar script could be adapted for PHP and ASP.

LAMP, mobileOK
 Print article This entry was posted by elvis on 03/16/10 at 10:06:29 pm . Follow any responses to this post through RSS 2.0.