Detect mobile and redirect

[DocRocks]

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

[chrisburton]

Why not use media queries?

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

[Johnnyb]

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

}

[chrisburton]

@Johnnyb – Load extra content?

[Johnnyb]

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.

[chrisburton]

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

[DocRocks]

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.

[sheepysheep60]

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

[jamygolden]

@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.

[Johnnyb]

@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.

[jamygolden]

@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.

[DocRocks]

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?

[DocRocks]

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.

[DocRocks]

Site back online.

[Johnnyb]

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’

[Author]

Posts