Mobile device detection

Forum Moderators: bakedjake

Message Too Old, No Replies

Mobile device detection

xcoder

10:08 am on Sep 1, 2012 (gmt 0)

Hi all,

I'm looking for some advice on the best method for detecting a user browsing agent and redirecting to a mobile site accordingly.

The site currently consist of 7 static html pages. The html files are able to run php code in them.

What i am after is some php code capable of doing the browsing agent detection (covering all up to date mobile browsers, tablets including ipads included) and redirect to the mobile site if/when detecting a mobile device.

Could someone please recommend a good solution.

Thanks!

lucy24

8:01 am on Mar 7, 2013 (gmt 0)

I recommend ditching the whole UA detection idea and going with feature detection instead... if only because it gives me a chance to re-post a brilliantly simple bit of HTML that someone other than me, duh posted here last fall.

Try this. My eyes almost fell out of my head. I simply didn't know HTML alone could do that.

Version A: within document.

<style type = "text/css">

@media screen
{ body {background-color: #CCC;} }

@media screen and (max-width:1200px)
{ body {background-color: gray;} }

@media screen and (max-width:960px)
{ body {background-color: #F66;} }

@media screen and (max-width:700px)
{ body {background-color: #99F;} }

@media screen and (max-width:480px)
{ body {background-color: #696;} }

</style>

Version B: put each of the above lines into a separate stylesheet, named as follows. In <head> of html:

<link rel = "stylesheet" type = "text/css" media = "screen" href = "null.css">

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:2000px)" href = "one.css">

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:960px)" href = "two.css">

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:700px)" href = "three.css">

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:480px)" href = "four.css">

I think the source was this thread [webmasterworld.com]. (Datestamp on my saved files is 7 October so that's your terminus ante quem.) If I'm mistaken, someone will step forward and take credit.

drhowarddrfine

12:33 pm on Mar 7, 2013 (gmt 0)

Dear lucy24,

The 'type="text/css"' has not been needed for about 3 years now. Nor do we need type="text/javascript" or even quotes in most cases.

Sincerely,
Dr. I. B. Smartt
The Society for the Eradication of Unnecessary Attributes

lucy24

9:05 pm on Mar 7, 2013 (gmt 0)

or even quotes in most cases

Tell it to the validator :P In many, many areas it insists on things that are not part of the HTML 4 standard at all (capitalization is an obvious one). But they're good habits all the same.

Besides, nothing wrong with backward compatibility. Looking at recent logs I think I can now safely stop worrying about MSIE 6 for my specific audience-- but that's only within the past year. And I still have to budget for satellite-internet load times.

nomis5

8:54 pm on Mar 8, 2013 (gmt 0)

Lucy24,

Isn't your solution missing the point of the OP? I'm no technical expert but your code appears to be trying to serve up different style sheets within a webpage and not, as the OP wanted, detecting a mobile device and then diverting to a separate mobile site.

I may also be wrong as well but the solution you provide for serving up different style sheets based on "width" doesn't take into account what that width is.

Again I'm no technical expert but something along the lines of

<meta name="viewport" content="width=device-width, initial-scale=x, maximum-scale=x">

needs to be included in the html to ensure that "width" is the "device-width" and not some other definition of width. Androids seem to serve up amazingly silly definitions of screen width without that statement.

I am amazed there has been no post here of a fool proof way of

a) detecting mobiles / tablets etc in css and using different css rules based on the result

b) detecting different mobiles in an html page and redirecting to a mobile site(s) based on the result.

All points made solely to try and learn a bit more about this perplexing subject!

lucy24

10:52 pm on Mar 8, 2013 (gmt 0)

The glory of the "max-width" format is that it doesn't measure device-width ... except in those devices, currently including almost all mobiles, where there is no separate window. In a browser, it goes by the size of your current window, and changes dynamically. And that is very much what you want. Or, ahem, should want.

Speaking as a user, what I definitely DON'T want is a site that says "Hah! I see you have a 1600px monitor, so I'll serve you the 1600px version of my site." What I want instead is "I see your window is 800px wide, so I'll give you the version that fits that size."

My initial point was that you may not need to make a separate mobile site at all. It depends of course on content, but many times you can do it all with simple changes in stylesheet.

The overwhelming problem with user-agent detection is that there are simply so ### many of them. And sometimes a site makes the wrong choice, for example sending an iPad to the version made for iPhones.

Leosghost

11:27 pm on Mar 8, 2013 (gmt 0)

The overwhelming problem with user-agent detection is that there are simply so ### many of them. And sometimes a site makes the wrong choice, for example sending an iPad to the version made for iPhones.

Also "world+dog" are churning out new mobile devices of all sorts, almost daily..no way to keep up..max-width ..means you don't have to..

drhowarddrfine

12:49 pm on Mar 9, 2013 (gmt 0)

Tell it to the validator :P

OK. I will.

<!doctype html>
<title></title>
<p class=one>Attributes don't need quotes in most cases</p>

Validates without error but that's always been true since at least 4.01: [w3.org...] and [w3.org...]

In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58).