UserAgent detect- StyleSheet for Blackberry / iPhone

[ferrer]

Hi there,

So I have my pretty CSS for screen set-up.
I want to offer an iPhone / Blackberry stylesheet. I can see in the stylesheet manager I can check a "mobile" select box.
Does anyone know if thats all I need to do, or will I need to write some sort of a module to display my site using a custom iPhone stylesheet if they browse to it from their device?

I wondered if mobile Safari even reported itself as a mobile browser...

[cyberman]

If your page is completely CSS formated you have only to add this stylesheet. Your blackberry should use only this one ...

[Wiedmann]

I can check a "mobile" select box.

You mean "handheld"?

I want to offer an iPhone / Blackberry stylesheet.

iPhone is only using "screen". Blackberry is using "handheld".

(For a iPhone you can also use "only screen and (max-device-width: 480px)")

[ferrer]

So to recap, the blackberry will use the handheld style sheet, but I still don't understand how I can serve an iPhone specific style sheet to iPhone clients...

Has anyone seen smarty code to do this, is that the best way to do it?

[calguy1000]

That is not a question for CMS specifically

You need to do some research and come back with a specific question (if it has not already been answered) as to

how do I implement X specific CSS or XHTML technology in CMS Made simple.

[ferrer]

Hi Calguy,

I'm sorry if I am posting in the wrong area? I have done the research, I'm stuck on working out the best way to serve a custom stylesheet for iPhone clients, by detecting the useragent. I obviously would prefer to do it internally to CMSMS.

I thought this functionality would be useful for many people, and that the thread had some merit on that basis.

[calguy1000]

then exactly what specific code do you need to output in your XHTML?

[ferrer]

I need to replace the standard



that is outputted into my {stylesheet} tag, with a second CSS file that has been customised for iPhones if the CMS detects mobile Safari as a UserAgent.

[Nullig]

Nullig

[calguy1000]

or, with the correct research, it can be done in smarty....

[ferrer]

Doing it in smarty is my goal, I'm just not very good at writing code. Thank you Nulliq, I found that too, problem is then its hard-coded in the template and not using the inbuilt stylesheet manager.

As I'm out of my depth on the smarty route, I think its the way I will end up going.

[Nullig]

How about creating a UDT called "iphoneudt", with the following code:

Code: Select all

if (stristr($_SERVER['HTTP_USER_AGENT'],"iPhone"))
	$iphone = "true";

return $iphone;

Then place this code in your template:

Code: Select all

{capture assign='iphone'}{iphoneudt}{/capture}
{if $iphone eq "true"}
<link rel="stylesheet" type="text/css" media="screen" href="http://your.site.com/stylesheet.php?templateid=##&mediatype=screen" />
{/if}

Of course, you'd have to have the proper sitename and template id.

Nullig

[ferrer]

Nullig you are a rockstar. That looks great, so I understand your code...

The UDT tag is php that returns true if it detects an iPhone useragent, otherwise it returns false.

Then your smarty code in the template captures that output, and if it returns true, writes out the link to the iphone stylesheet.

Is that correct?

Can I add an "if" somehow to the smarty code to so that if iPhone detected is false, it will then write out my standard {stylesheet} tag, this way I only will get one or the other stylesheet and don't need to worry about them overwriting each other.

Thank you so much for taking the time to help.

[Wiedmann]

Doing it in smarty is my goal, I'm just not very good at writing code. Thank you Nulliq, I found that too, problem is then its hard-coded in the template and not using the inbuilt stylesheet manager.

a)
add a new stylesheet with e.g. the name "iPhone" and media type "screen" to CMSMS and don't attach this to a template.

b)
put this code in your template instead of just "{stylesheet}":

Code: Select all

{if false !== $smarty.server.HTTP_USER_AGENT|lower|strpos:'iphone'}
    {stylesheet name='iPhone' media='screen'}
{else}
    {stylesheet}
{/if}

(no need for an udt in this case)

[Nullig]

A far more elegant solution, Wiedmann. Thx.

Nullig