•  03-07-2019
  •  | 
  •  

Question

I have a webpage and I was recently asked to create the mobile version for it, now that I've done it I was asked to make an automatic redirection so that if the user goes into the webpage through a PDA/iPhone/Smartphone/etc he/she gets automatically directed to the m.website.com but I have no idea how to do this =/ I've tried some php's and javascripts I found using google but nothing so far has helped me. Could you guys?

Was it helpful?

Solution

Check out WURFL and build a 302 redirector for User-Agents that match its list of mobile browser user-agent strings.

Or, just look for iPhone in the User-Agent and redirect those to your iPhone site. The other browsers command such small market-share it is hardly worth targeting them. iPhone is 67 percent of the mobile web HTML traffic. You could do this in Javascript on your web page.

OTHER TIPS

I have published the last version of "Apache Mobile Filter", this open source project has in the first 8 months, more than 1100 downloads from sourceforge and I suppose the same from CPAN.

The Apache Mobile Filter allows you to access WURFL from any programming language, not just Java and php that is traditionally used for dynamic mobile web sites.

The module detects the mobile device and passes the WURFL capabilities on to the other web application as environment variables. It can also be used to resize images on the fly to adapt to the screen size of the mobile device. Try it and let me know your opinion.

For more info: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html

I wrote a JS script called "redirection_mobile.js" to solve this issue. It detects the User Agent and redirects to a mobile version if you're accessing a site from a mobile device.

In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.

You can find the source code on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

perhaps if you list your code that is not working, more help could be provided.

if you've got php, User Agent detection works well in most circumstances.

< ?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true) { header(”Location: http://www.example.com/“); }
}
?>

Also, this looks like a dupe of: Identifying different mobile handsets and redirecting to different websites

A very similar question was asked and answered here:

How do I determine whether it's a mobile device with PHP?

Traditionally mobile devices have been detected by comparing the HTTP User-Agent header against a list of well known mobile UA strings. A novel approach instead tries to detect the presence of a desktop OS - anything which is found to not be a desktop OS must then be mobile.

This results in far less false positives.

I've written a post with sample code in Python here:

http://notnotmobile.appspot.com

Detect whether a device is a desktop - if it is not then redirect to your mobile site!

Cheers,

John

Once you get your mobile subdomain set-up, be sure to refer to this article from A List Apart which describes how mobile devices react to the CSS attribute, media="handheld". Unfortunately, not all react equally.

http://www.alistapart.com/articles/returnofthemobilestylesheet

The "Apache Mobile Filter" is one of the modules of "Apache Module Registry" portal (http://modules.apache.org/search.php?id=1787)

I use http://detectmobilebrowser.com, and found it is the quickest and easiest way. It works quite well. This site generates server scripts automatically (php, perl, python, coldfusion, apache, jquery, etc.) that detects mobile browser and redirects accordingly. You can just copy and paste the code somewhere in your Index file.

This bit of Javascript also might assist: 

<script>
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB10|IEMobile|Opera Mini/i.test(navigator.userAgent) ) //Specify the mobile devices that you would like this if statement to apply to. 
    {
        image_y = document.getElementById('bodyID'); //Get the ID of the body and assign it to a variable.
        image_y.parentNode.removeChild(image_y); //Remove the body to prevent anything loading on the screen in case there are issues with the window location redirect.
        window.location = "mobile.html"; //Re-assign the window location to a new html page that is caters for the redirect. 
    }
</script>

I placed it in the start of the HTML body.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top