469,304 Members | 1,888 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,304 developers. It's quick & easy.

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

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.
Oct 31 '08 #1
8 12252
Tarantulus
114 100+
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
Oct 31 '08 #2
Markus
6,050 Expert 4TB
The user agent shouldn't be trusted, though, as it can be faked.
Oct 31 '08 #3
nathj
938 Expert 512MB
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
Oct 31 '08 #4
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.
Nov 3 '08 #5
nathj
938 Expert 512MB
Hi Barry,

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

Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" href="../css/layout.css" type="text/css" media="all"/>
  2. <link rel="stylesheet" href="../css/colour.css" type="text/css" media="all" />
  3. <link rel="stylesheet" href="../css/print.css" type="text/css" media="print" />
  4.  
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
Nov 3 '08 #6
ak1dnar
1,584 Expert 1GB
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.
Nov 3 '08 #7
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
Nov 3 '08 #8
Another method you may want to consider is just serving up an alternative site or CSS based on the detected screen resolution. For example:

Expand|Select|Wrap|Line Numbers
  1. function detectRes() {
  2. if (screen.width < 400) location.replace('http://mobile.epiphanet.com');
  3. }
  4.  
or for CSS based...
Expand|Select|Wrap|Line Numbers
  1. if (screen.width < 400) {
  2. document.write('<link rel="stylesheet" href="mobile.css" type="text/css" media="all"/>');
  3. } else {
  4. document.write('<link rel="stylesheet" href="layout.css" type="text/css" media="all"/>');
  5. }
  6.  
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>.
Sep 3 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Sara | last post: by
4 posts views Thread by InnoCreate | last post: by
6 posts views Thread by psylencer | last post: by
reply views Thread by PEO from ITALY | last post: by
4 posts views Thread by Sjef | last post: by
3 posts views Thread by ajtrichards | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.