Checking for mobile phone users

I am making a mobile phone version of my website using a separate style sheet and want to check if I have a mobile user and automatically change the style sheet. Can anyone tell me what values for $_SERVER[‘HTTP_USER_AGENT’] I should be looking for please? Or is there a better way of checking?

Thanks G :slight_smile:

the answer to this changes monthly

I agree, the approach of using the HTTP_USER_AGENT is an ever guessing game that you are constantly behind. That is why my suggestion is to always utilized Media Queries, it gives you the ability to load specific styles or overwrite styles to fit mobile users.

Yes, if you just want the site to display differently on mobile devices, it’s better to use CSS for this. A powerful way to do this nowadays is with @media queries, where you set different styles for different viewports sizes—either within the one same style sheet or in separate style sheets, if you prefer.

Ah - thanks guys. I though there might be a better way.

Cheers G :slight_smile:

What I do on the Barebones CMS website is check how wide the browser window is. If it is smaller than some reasonable width, I set a cookie and reload the page using Javascript (cacheprof=mobi), which switches to the mobile flavor. This switch won’t happen if Javascript is disabled or if the cookie already exists. The server side checks to see if the cookie is set to the value ‘mobi’. If so, it serves up the mobile version, otherwise the regular website version. I also offer a link that changes the cookie’s value and reloads the page that switches it back to the full website (cacheprof=) and a link to switch to the mobile version.

This approach is, IMO, better than media queries because it allows me to do things beyond CSS and not force the user to a mobile website if they don’t want to for some reason. Plus, I can test my mobile version from my desktop by clicking the link to switch. Relying solely on media queries is a bad idea because mobile browsers will still download the entire content of the page (including hidden images) even if it is declared hidden by a CSS directive.

If you still want to do user-agent sniffing, I recommend using either Mobile ESP or WURFL. That way you only have to upgrade a single library and have the latest signatures without expending a lot of extra effort.

Thanks Thomas. Having looked at the media check and it doesn’t do as I wanted. I can set anything is display:none; but that doesn’t stop the element from being downloaded and I have been using php conditionals not to include certain items at all. I’ve concluded that I need to create a completely separate mobile website, a cut-down version of the original…

Yes, some sites need to do that, but make sure it’s really necessary first. On smallish sites, if you find that you want to hide some content from mobile users, it’s worth first asking if it’s worth serving that up to desktop users too. A lot of websites are clogged up with irrelevant fluff that would be better left out.

Some food for thought:

http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
http://www.slideshare.net/yiibu/the-trouble-with-context
http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu

Thanks for the references Ralph.