How to add Mobile detection/redirection to site

Discussion in 'Web Design and Development' started by cosmokanga2, Jan 31, 2010.

  1. macrumors 6502a

    cosmokanga2

    Joined:
    Jan 7, 2008
    Location:
    Canada, where we live in igloos.
    #1
    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?
     
  2. macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    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.
     
  3. macrumors regular

    Joined:
    Nov 12, 2009
    #3
    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.
     
  4. macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
  5. macrumors 6502a

    Penguissimo

    Joined:
    Nov 17, 2009
    Location:
    Michigan
    #5
    Another option would have been to subscribe to it ;)
     
  6. thread starter macrumors 6502a

    cosmokanga2

    Joined:
    Jan 7, 2008
    Location:
    Canada, where we live in igloos.
    #6
    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?
     
  7. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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.
     
  8. thread starter macrumors 6502a

    cosmokanga2

    Joined:
    Jan 7, 2008
    Location:
    Canada, where we live in igloos.
    #8
    It works! Thank you very much!
     
  9. macrumors newbie

    Joined:
    Jul 7, 2010
    #9
    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
     
  10. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    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.
     
  11. macrumors newbie

    Joined:
    Sep 12, 2012
    #11
    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:

  12. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
    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.
     
  13. macrumors newbie

    GDKen

    Joined:
    Jul 18, 2012
    #13
    @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.
     
  14. macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #14
    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!
     
  15. macrumors 65816

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #15
    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
     
  16. macrumors 65816

    Joined:
    Jun 18, 2010
    #16
    Keep in mind that the original post is three years old. ;)
     
  17. macrumors 65816

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #17
    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.
     

Share This Page