Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End Detect mobile and redirect

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 45 total)
  • Author
    Posts
  • #34554
    DocRocks
    Member

    I’m not a php programmer and would like to find a php script to detect visitors who are using mobile phones to my site, and then redirect them to a subdomain on the site optimized for small screens. Can someone point me to an easy to understand and install script to do that?

    Thanks

    #88410
    chrisburton
    Participant

    Why not use media queries?

    Simple Google search: http://www.9lessons.info/2010/09/redirect-mobile-devices-with-php.html

    #88418
    Johnnyb
    Member

    @ChristopherBurton, he may want a dedicated mobile site to prevent having to load extra content which isn’t needed for a mobile version. Media queries are great, but if you want a really lightweight stripped-down version of your site for mobile then redirecting to a specifically designed page is the way to go, in my opinion. Although by using adaptive images you can combat part of this problem.


    @DocRocks
    , you can use PHP to detect specific user agent strings, but rather than doing that it’s probably a better idea to redirect based on screen size. I don’t know how to do this in PHP but with jQuery you could use something like this:


    if($(window).width() < 480){
    window.location = "mobile.yoursite.com"
    }
    #88419
    chrisburton
    Participant

    @Johnnyb – Load extra content?

    #88424
    Johnnyb
    Member

    Well yeah, by that I mean the whole page and all of it’s resources still have to load even if you don’t use them. You may be hiding certain elements, having to scale down or hide certain images completely, including JS libraries that you don’t need for the mobile version, all of which are being loaded and slowing down the page load.

    With a dedicated mobile page/site, you can include just the elements you need, reduce image size dramatically, and only load the scripts/stylesheets you need.

    There are pros and cons to both using a separate site or using media queries, but there are cases when you’d want to use the former.

    #88427
    chrisburton
    Participant

    Okay I see what you meant. I would agree and say that it is situational.

    #88442
    DocRocks
    Member

    Thanks Christopher and Johnnyb – the simple jQuery looks like what I am after to detect small screens. I enclosed the if statement with tags, put it at the top of my page and changed the url but it does not redirect. Is it just my Android phone or have I missed something? PHP is enabled on my host.

    #88451
    sheepysheep60
    Participant

    The code that has been posted was jQuery, which is essentially JavaScript, which is NOT php. In the head tags of your page put it in like this:







    Hope this helps, Dave

    #88463
    jamygolden
    Member

    @Johnnyb I think if you created a media queried site (that was serious) and you made mobiles load everything only after that they receive the media query, you’re doing it wrong. Even HTML5 boilerplate promotes loading mobile styles first and desktop computers last (since desktop computers mostly have broadband capabilities)

    For example:

    @media only screen and (min-width: 480px) {

    }

    @media only screen and (min-width: 768px) {

    }

    The only problem you’ll run into is lte IE 8 not supporting the media queries, however the latest modernizr has respond.js built in which solves this problem.

    So if you build the site correctly, mobiles don’t have to load up any unnecessary information (aside from the size of the CSS file itself).


    @DocRocks
    if media queries definitely aren’t for you, check out php mobile detect. I’ve used it before and it was great.

    #88466
    Johnnyb
    Member

    @jamy_za, I understand what you’re saying but I have to disagree. Structuring the CSS like that still doesn’t prevent the full HTML page and all of it’s resources from being loaded. Any “desktop-sized” images and all of your HTML will still be loaded despite not being needed, along with any JS which you may not need.
    Say you want to hide a sidebar with 6 ads in it for the mobile version, if using media-queries then that sidebar and those ads are still loaded in the page, they are just hidden using display: none. If each of those ads is 10k then that’s 60k (+ the weight of the HTML) which isn’t needed.

    #88470
    jamygolden
    Member

    @Johnnyb ok I see what you mean to a degree. Personally I would use the php mobile detect script above for excluding/including something like that.

    #88474
    DocRocks
    Member

    Thanks folks. I am trying Dave’s js and my Android mobile is reporting download unsuccessful for this site. The index.htm in the site root folder has Dave’s code in the head area and I have pointed window.location to the index.htm file in the /mobile folder on the site. I can open the mobile site on my desktop using the full url including the index.htm in the /mobile folder. Why does my Android browser fail?

    #88479
    DocRocks
    Member

    Sorry, having trouble with opening the site and am working with the host to resolve. Try the link to it later if necessary to help me resolve my mobile problem.

    #88483
    DocRocks
    Member

    Site back online.

    #88495
    Johnnyb
    Member

    hey @DocRock, that redirect works on my desktop, not sure why it’s not working on your android. Try using ‘window.location.href’ instead of just ‘window.location’

Viewing 15 posts - 1 through 15 (of 45 total)
  • The forum ‘Back End’ is closed to new topics and replies.