Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 31, 2010, 04:29 PM   #1
cosmokanga2
macrumors 6502a
 
cosmokanga2's Avatar
 
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-2013 13" MacBook Air, iPhone 5, Nikon D800
Website
cosmokanga2 is offline   0 Reply With Quote
Old 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
Dunmail is offline   0 Reply With Quote
Old 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.
__________________
astroot is offline   0 Reply With Quote
Old Feb 3, 2010, 10:20 AM   #4
definitive
macrumors 65816
 
Join Date: Aug 2008
posting in this thread for later reference.
definitive is offline   0 Reply With Quote
Old Feb 4, 2010, 12:12 PM   #5
Penguissimo
macrumors 6502a
 
Penguissimo's Avatar
 
Join Date: Nov 2009
Location: Michigan
Quote:
Originally Posted by definitive View Post
posting in this thread for later reference.
Another option would have been to subscribe to it
Penguissimo is offline   0 Reply With Quote
Old Feb 4, 2010, 07:10 PM   #6
cosmokanga2
Thread Starter
macrumors 6502a
 
cosmokanga2's Avatar
 
Join Date: Jan 2008
Location: Canada, where we live in igloos.
Quote:
Originally Posted by astroot View Post
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>[/HTML]

I got it from here.

What am I doing wrong?
__________________
Mid-2013 13" MacBook Air, iPhone 5, Nikon D800
Website

Last edited by cosmokanga2; Feb 4, 2010 at 07:21 PM.
cosmokanga2 is offline   0 Reply With Quote
Old Feb 4, 2010, 07:24 PM   #7
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by cosmokanga2 View Post
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.
angelwatt is offline   0 Reply With Quote
Old Feb 4, 2010, 11:51 PM   #8
cosmokanga2
Thread Starter
macrumors 6502a
 
cosmokanga2's Avatar
 
Join Date: Jan 2008
Location: Canada, where we live in igloos.
Quote:
Originally Posted by angelwatt View Post
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!
__________________
Mid-2013 13" MacBook Air, iPhone 5, Nikon D800
Website
cosmokanga2 is offline   0 Reply With Quote
Old 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
edwardjhines is offline   0 Reply With Quote
Old Jul 7, 2010, 05:16 PM   #10
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by edwardjhines View Post
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.
angelwatt is offline   0 Reply With Quote
Old Sep 12, 2012, 10:32 PM   #11
Rachelm
macrumors newbie
 
Join Date: Sep 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.
Attached Files
File Type: zip mobile-detection-scripts.zip (17.1 KB, 183 views)
Rachelm is offline   0 Reply With Quote
Old Sep 14, 2012, 08:31 AM   #12
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
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
SrWebDeveloper is offline   0 Reply With Quote
Old 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.
GDKen is offline   1 Reply With Quote
Old Sep 19, 2012, 06:59 AM   #14
bpaluzzi
macrumors 6502a
 
bpaluzzi's Avatar
 
Join Date: Sep 2010
Location: London
Quote:
Originally Posted by GDKen View Post
@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!
__________________
Mac Pro; Aluminum iMac; Mac Mini (x2); Macbook Pro; iPad; iPhone 4; TV 2 (x2); G4 Tower
bpaluzzi is offline   0 Reply With Quote
Old Dec 21, 2012, 01:19 PM   #15
960design
macrumors 6502
 
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
960design is offline   0 Reply With Quote
Old Dec 24, 2012, 01:32 PM   #16
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
Quote:
Originally Posted by 960design View Post
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.
Laird Knox is offline   0 Reply With Quote
Old Dec 26, 2012, 03:15 PM   #17
960design
macrumors 6502
 
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
960design is offline   0 Reply With Quote

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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -5. The time now is 04:15 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC