How to detect if mobile phone is viewing php page or PC

[barrybee]

PHP version 4.027
I want to change between style sheets when page is viewed on a mobile phone or a PC.

The pages looks fine on both when I manually set a key in the script.
My problem is how to determine if its viewed on a phone or PC.

I have used $_SERVER['HTTP_USER_AGENT']; to show the browser details
RESULTS from php pages.

HTC Mobile phone;
HTC_Pro_T7272 Opera/9.50 (windows NT5.1;U; en)

My PC;
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

I'm not sure how to tell from these results what is what.
I can see I can pick out the HTC_Pro string to set my key, but that would not be there on a different make of phone.
If phone or PC cannot be determined from $_SERVER['HTTP_USER_AGENT']; have you any idea how.

Thanks in advance, Barry.

[Tarantulus]

User agent is the correct way, but as there are so many moble browsers you would need to account for them all (or as many as is feasible)

http://www.zytrax.com/tech/web/mobile_ids.html is a good start

[Markus]

The user agent shouldn't be trusted, though, as it can be faked.

[nathj]

Why bother?

Can't you simply link in a media type specific style sheet?

CSS Media Type

so you can either have a separate complete style sheet or you can have multiple style sheets -

1. layout.css media="all" that defines layout in percentages
2. Screen.css media ="screen" that defines things for screens
3. handheld.css media ="handheld" that defines mobile styles
4. print.css media = "print" that defines printing
5. color.css media="all" that defines you general color scheme

That's pretty much what I do, there are loads of tutorials around and about on this, check out A List Apart for further ideas.

This way there is no need for browser detection which, as posted above, is unreliable.

Cheers
nathj

[barrybee]

Hi, thanks for the very speedy replies.
I have read a lot on the web and in some books and they do seem suggest that media types could be what I need, but nothing I have tried seems to work. I can still get the correct appearance of my target page when viewed on a phone or a PC but only if I change to the correct style sheet manually.

Natj, I just love it when someone says, 'Can't you simply link in a media type specific style sheet?'. I think thats what I'm trying to do, but I don't know how. Could you please show me how?

Thanks; Barry.

[nathj]

Hi Barry,

In the head section of your document you need to put:

<link rel="stylesheet" href="../css/layout.css" type="text/css" media="all"/>
<link rel="stylesheet" href="../css/colour.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/print.css" type="text/css" media="print" />
 

When linking style sheets like this the order is important. So in this case the main layout comes first, then colour is added and finally an alternative is given. The use of media type 'all' ensures that the main styles are available to all devices but these can then be overwritten in the specific using display:none.

A great example is the menu - this is needed in the main layout and any other non-printed layouts but not in the print layout so you simply add the definition of display; none to the element in the print style sheet.

I hope that makes sense

nathj

[ak1dnar]

If you still looking for script to detect the device, WURFL PHP Library is the best solution for you. wurfl contains information about capabilities and features of many mobile devices.

Basically it's good to create a separate mobile friendly web site for the home web.
home web site: http://domain.com
mobile version: http://mobile.domain.com or even now http://domain.mobi extension is there for mobiles.

Try the wurfl and redirect mobile/hand held devices to the mobile version.

[barrybee]

Hi Nathj
Thanks, thats sort of what I've been trying but the order might not have been right.
Thanks again I will try again tomorrow.
Barry

[kyleyoung]

Another method you may want to consider is just serving up an alternative site or CSS based on the detected screen resolution. For example:

function detectRes() {
if (screen.width < 400) location.replace('http://mobile.epiphanet.com');
}
 

or for CSS based...

if (screen.width < 400) {
document.write('<link rel="stylesheet" href="mobile.css" type="text/css" media="all"/>');
} else {
document.write('<link rel="stylesheet" href="layout.css" type="text/css" media="all"/>');
}
 

This way always made sense to me. The reason we are building an alternative view in the first place is because the device uses a lower resolution.

Kyle Robinson Young
<link removed>.