How to add Mobile detection/redirection to site

cosmokanga2 · Jan 31, 2010

I'm trying to add mobile detection/redirection to my site as the main version contains flash and I want an alliterative for mobile users.

The mobile version and the main are built in iWeb. I've been looking on the internet and php seems to be the way, I'm just confused on how to add it to the site code.

Do I add a string in the index html file that references a php file of does the main page have to be php? What do I do?

Dunmail · Jan 31, 2010

If you want to go the PHP route then you need to rename your files with a "php" extension rather than "html" so that the server pipes the request through the PHP engine. Also your main page should be named index.html (or php) rather than main.html (or php).

You may not need to serve up separate pages - if the Flash isn't too overt then you can add fallback images/content like this:

<object
type="application/x-shockwave-flash" data="../flash/bgr_banner.swf"
width="600" height="66">
<param name="movie" value="../flash/banner.swf">
<param name="loop" value="false">
<param name="wmode" value="transparent">
<img class="bordered" src= "./images/banner.jpg" width="600" height="66" alt="some suitable text">
</object>

If Flash isn't available then the image is shown, if images are disabled then the alternative text is shown.

astroot · Feb 2, 2010

Easy, just add this code to your <head> area on your non-mobile page:

HTML:

<script type="text/javascript">
 if(navigator.userAgent.match(/iP(od|hone)/i) 
 {
 location.href='http://www.stefanfeldmannphotography.com/iPhone/Main.html';
 }
</script>

You'll want to add it near the top of the head so that the re-direct happens pretty quickly and the user doesn't load any unnecessary items. I put mine just below the content-type meta tag, and above the <title> tag.

Also, you'll have to add that same code snippet to each of your pages, so on your non-mobile People page, you'll need to re-direct the iPhone users to /iPhone/People.html

Hope that helps.

definitive · Feb 3, 2010

posting in this thread for later reference.

Penguissimo · Feb 4, 2010

definitive said:
posting in this thread for later reference.

Another option would have been to subscribe to it

cosmokanga2 · Feb 4, 2010

astroot said:
Easy, just add this code to your <head> area on your non-mobile page:

snip

Thanks! This was the idea I was looking for. After Googling the code I found that I could get it to ask the user if they want to be redirected, so I've tried to add that code. Problem is that I can't get it to work.

This is the code:

HTML:

 <title>Stefan Feldmann Photography</title>
    <script language="JavaScript" type="text/javascript">
<!--
function iPhoneAlternate() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
var question = confirm("Would you like to view our iPhone Site?")
if (question){
window.location = "http://www.stefanfeldmannphotography.com/iPhone/Main.html";
}else{}} }
//-->
</script>

I got it from here.

What am I doing wrong?

angelwatt · Feb 4, 2010

cosmokanga2 said:
What am I doing wrong?

My guess would be that you don't have anything calling that function, so the check never happens. You don't really need it to be in a function so remove the first line and delete the last } in the code. It should then run that code during the loading of the page.

cosmokanga2 · Feb 4, 2010

angelwatt said:
My guess would be that you don't have anything calling that function, so the check never happens. You don't really need it to be in a function so remove the first line and delete the last } in the code. It should then run that code during the loading of the page.

It works! Thank you very much!

edwardjhines · Jul 7, 2010

Mobile Redirect for non i-devices

I'm very new to all of this, in fact, I live in that part of the world which still
in dial-up mode... So I don't even own a hand-held device. Still, I'm curious...regarding

<script type="text/javascript">
if(navigator.userAgent.match(/iP(od|hone)/i)
{
location.href='http://www.stefanfeldmannphotography.com/iPhone/Main.html';
}
</script>

I'm wondering if the script by is limited to iphones...what happens when a blackberry or android user lands on a page with this particular script? Would it redirect or does the script need to be expanded to cover other non i-devices?

Thank you very much for any assistance.

Edward J Hines

angelwatt · Jul 7, 2010

edwardjhines said:
I'm wondering if the script by is limited to iphones...what happens when a blackberry or android user lands on a page with this particular script? Would it redirect or does the script need to be expanded to cover other non i-devices?

If you look at the script, you see that it's examining the user-agent of the device and is looking specifically for the string "iphone" so no, it won't have effect on other devices.

Rachelm · Sep 12, 2012

angelwatt I need your help

Hi, I need your help installing mobile-detection-scripts to a non wordpress website (hosted by godaddy). I am not well versed with regards to godaddy.

attached is a zip file containing the installer and instructions. Hope you can assist me with my concern.

Thanks in advance.

SrWebDeveloper · Sep 14, 2012

I think some of you might find this link interesting, related to this discussion:

http://detectmobilebrowsers.mobi/

That's a PHP function, open source, which detects the user agents of various modern mobile devices so you can create custom redirects/pages for each. I prefer using server side detection/redirection for more control, but there are also Javascript complete packages that do the kind of thing posted here using iPhone as an example.

For those not sure of what a user agent is and how it is referenced:

I also wanted to take a moment to explain that whatever language is used, a user agent string is nothing more than an HTTP header identifying the device making the connection to your web server. Due to the wide market of mobile devices, lax adherence to standards and constant changing of version, make and model information user agent strings change alot. Most functions like the ones found in this discussion have common keywords, but really all that is going on under the hood is a pattern match of a keyword data in the user agent string detected by your web server, and redirect if true.

To the experts:

Another facet of this is a responsive web site where screen size is detected and a site dynamically re-aligns and/or resizes content to fit on the fly. For those I suggest using themes which support that and integrate with many popular CMS solutions. For example, Omega with Drupal.

Just adding some additional tech stuff to the conversation -- hope folks found this a little useful as mobile/responsive sites is not a fad.

GDKen · Sep 18, 2012

@Rachelm

I'm with Go Daddy and came across your post.

Have you been able to upload your scripts to your hosting account?

If not I would appreciate the opportunity to review and assist. Feel free to direct message me.

bpaluzzi · Sep 19, 2012

GDKen said:
@Rachelm

I'm with Go Daddy and came across your post.

Have you been able to upload your scripts to your hosting account?

If not I would appreciate the opportunity to review and assist. Feel free to direct message me.

Ken - this is fantastic customer service. I feel you may have opened yourself up to a floodgate of requests, but just wanted to acknowledge the level of commitment you're making. I'll spread the word that things have indeed changed at GoDaddy!

960design · Dec 21, 2012

Am I the only one that uses css media queries to detect mobile devices? Have I fallen from the leading edge to old school?

lonely css

Laird Knox · Dec 24, 2012

960design said:
Am I the only one that uses css media queries to detect mobile devices? Have I fallen from the leading edge to old school?

lonely css

Keep in mind that the original post is three years old.

960design · Dec 26, 2012

Ahh, thank you. I was hoping that I didn't stroke out into a coma at the desk and start having to fight off zombies.

Search

Search

How to add Mobile detection/redirection to site

cosmokanga2

macrumors 6502a

Dunmail

macrumors regular

astroot

macrumors regular

definitive

macrumors 68020

Penguissimo

macrumors 6502a

cosmokanga2

macrumors 6502a

angelwatt

Moderator emeritus

cosmokanga2

macrumors 6502a

edwardjhines

macrumors newbie

angelwatt

Moderator emeritus

Rachelm

macrumors newbie

Attachments

SrWebDeveloper

macrumors 68000

GDKen

macrumors newbie

bpaluzzi

macrumors 6502a

960design

macrumors 68040

Laird Knox

macrumors 68000

960design

macrumors 68040

Our Staff