How to add Mobile detection/redirection to site

cosmokanga2 · Jan 31, 2010, 04:29 PM

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 · 04:48 PM

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, 09:48 AM

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>[/HTML]

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, 10:20 AM

posting in this thread for later reference.

Penguissimo · Feb 4, 2010, 12:12 PM

Quote:

Originally Posted by definitive

posting in this thread for later reference.

Another option would have been to subscribe to it

cosmokanga2 · 07:21 PM

Quote:

Originally Posted by astroot

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">

</script>[/HTML]

I got it from here.

What am I doing wrong?

angelwatt · Feb 4, 2010, 07:24 PM

Quote:

Originally Posted by cosmokanga2

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, 11:51 PM

Quote:

Originally Posted by angelwatt

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, 09:27 AM

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, 05:16 PM

Quote:

Originally Posted by edwardjhines

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, 10:32 PM

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, 08:31 AM

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, 10:07 PM

@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, 06:59 AM

Quote:

Originally Posted by GDKen

@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, 01:19 PM

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, 01:32 PM

Quote:

Originally Posted by 960design

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, 03:15 PM

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.

Jan 31, 2010, 04:29 PM	#1
cosmokanga2 macrumors 6502a Join Date: Jan 2008 Location: Canada, where we live in igloos.	How to add Mobile detection/redirection to site 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? __________________ Mid '10 15" Macbook Pro i5, iPhone 3GS, iPad 2 Nikon D80, f/3.5-4.5 18-70mm, f/2.8 70-200mm VRII My Flickr My Website
	0

Jan 31, 2010, 04:48 PM	#2
Dunmail macrumors regular Join Date: Mar 2009 Location: Skipton, UK	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. Last edited by Dunmail; Jan 31, 2010 at 04:48 PM. Reason: sensible names
	0

Feb 2, 2010, 09:48 AM	#3
astroot macrumors regular Join Date: Nov 2009	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>[/HTML] 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. __________________
	0

Jul 7, 2010, 09:27 AM	#9
edwardjhines macrumors newbie Join Date: Jul 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
	0

Sep 14, 2012, 08:31 AM	#12
SrWebDeveloper macrumors 68000 Join Date: Dec 2007 Location: Alexandria, VA, USA	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. __________________ Jim Goldbloom Sr. Web Developer, owner GoldTechPro, LLC http://www.GoldTechPro.com
	0

Feb 3, 2010, 10:20 AM	#4
definitive macrumors 65816 Join Date: Aug 2008	posting in this thread for later reference.
	0

Sep 18, 2012, 10:07 PM	#13
GDKen macrumors newbie Join Date: Jul 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.
	1

Dec 21, 2012, 01:19 PM	#15
960design macrumors regular Join Date: Apr 2012 Location: Destin, FL	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 __________________ TI-99/4A, tape cassette, 12" B&W Zenith
	0

Dec 26, 2012, 03:15 PM	#17
960design macrumors regular Join Date: Apr 2012 Location: Destin, FL	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. __________________ TI-99/4A, tape cassette, 12" B&W Zenith
	0


MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
thread	Thread Starter	Forum	Replies	Last Post
How to supercharge Mini?	ranny2	Mac mini	18	Oct 27, 2011 08:53 PM
How To Remove Server Part Of Lion?	hhaydenn	iMac	2	Aug 18, 2011 05:21 PM
GUIDE: How to add Flash Galleries to iWeb sites.	cosmokanga2	Web Design and Development	2	Dec 21, 2010 12:14 PM
How to add Google Analytics to a site hosted with MobileMe?	66217	Web Design and Development	4	Feb 6, 2009 12:17 AM
How to add an automatic date-tracker to my site	macaddict23	Web Design and Development	7	Apr 26, 2007 07:35 PM