How to detect useragent and serve a different CSS or template for iPhones

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: How to detect useragent and serve a different CSS or template for iPhones

Post by djkirstyjay »

Dr.CSS wrote:

=b){nw=b+"px";}if(w


#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}






Thanks for that, but it's actually even stranger, as here is the head section of the template. As you can see yourself there are no tags... so they must be being added by something else.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<!-- Type the title of your site here -->
<title>{sitename} - {title}</title>

{metadata}

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

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

</head>
EDIT >> In fact it looks like a different header. If you could be so kind, can you please send me a quick PM with the url of the page, as it could possibly be a different template, so I could locate easily.
Last edited by djkirstyjay on Fri May 07, 2010 10:29 am, edited 1 time in total.
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How to detect useragent and serve a different CSS or template for iPhones

Post by Dr.CSS »

I clicked the only link you have in your post and it goes to this page...

http://www.armadasur.com/cd-tenerife-fo ... ters-club/
Top
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: How to detect useragent and serve a different CSS or template for iPhones

Post by djkirstyjay »

Dr.CSS wrote: I clicked the only link you have in your post and it goes to this page...

http://www.armadasur.com/cd-tenerife-fo ... ters-club/
Well well well... ta for that. I checked the template and it was fine... turned out the Global Content Block, 'Javascript for IE' contained them, as the {literal} tags were wrapped in the tags. This was the default GCB that came with CMSMS when I installed it, so maybe there are a lot of other people out there with the same issue... it was installed about 5 years ago though, and upgraded since many times, so I couldn't tell you what flavour of CMSMS the original installation was now.

FYI, The GCB had the following code, if anyone wants to check theirs too. The offending tags are in Red. :)
{literal}
=b){nw=b+"px";}if(w

{literal}
Top
JeremyBASS

Re: How to detect useragent and serve a different CSS or template for iPhones

Post by JeremyBASS »

oh.. you know there has been this plugin around for a while called borwsertools.. may be worth a look.. you can do things like ..

{browsertools action="sniff" Output="Name,Version" assign=Bvn stripSpace=true}
{browsertools action="sniff" Output="Name" assign=Bn stripSpace=true}
{browsertools action="sniff" Output="Name,Version" assign=Bnvd stripSpace=true dotReplace=''}


and use that to test..


{if Bn == 'ipad'}
    {stylesheet name='ipad' media='screen'}
{else}
    {stylesheet}
{/if}


just thought I'd throu that out there ;) cheers -Jeremy
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How to detect useragent and serve a different CSS or template for iPhones

Post by Dr.CSS »

@djkirstyjay

That has never been a GCB it has always been in the template , it seems at some point you made it into one which tiny must have added those, it's always best to just put things like that in the template so your site isn't having to do a DB call to get it, since it's not something you will be changing which is what GCB are for, you most times will use them if it's something you may change at some point like the footer text and you don't want to have to open each page or template to change it...
Top
michaywood
Power Poster
Power Poster
Posts: 280
Joined: Thu Apr 15, 2010 12:27 am

Re: How to detect useragent and serve a different CSS or tem

Post by michaywood »

I've been reading and re-reading these "switch layout/template for mobile" forum posts for days now and finally got a setup that I like!

Basically, I'm only using ONE CSS file! It was getting confusing trying to style with a separate CSS file for mobile, so I just got rid of the mobile one, and made my regular one more versatile.

So how did I make it show up different? I too was REALLY interested in switching actual TEMPLATES not just the CSS. This is cause I wanted different info to show up on mobile than the online. (i.e.- Online I have a video slideshow. When viewed on mobile, it is just a <li> list of the videos with the title underneath).

In my Template, I put:

Code: Select all

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
so that it would know to fit an iPhone (since this is really the only device I was interested in. You could easily adjust this to fit other browsers).

Still in my Template, I took my business to the {content} tag. I replaced my content tag with this:

Code: Select all

{if false !== $smarty.server.HTTP_USER_AGENT|lower|strpos:'iphone'}
{literal}
<__script__ type="text/javascript">
		window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
	
		function loaded() {
			document.getElementById("page_wrapper").style.visibility = "visible";
			window.scrollTo(0, 1); // pan to the bottom, hides the location bar
		}
	</__script>
{/literal}
    <span class="mobile_content">{content block="Mobile Content"}</span>
{else}
   <span class="regular_content">{content}</span>
{/if}
That JS just hides the addy bar on the iPhone. But as you see, I basically just have 2 content blocks in my template, and based on which browser you're on, it'll show one or the other!

So next, on to editing my page... Managing two copies of content is NOT what I'm wanting to do.. I want one central location of content that I can change. Then it hit me... one place I have the ability to switch templates, is within modules! I'll work with ListIt in this example.

So in my MAIN Content block I put:

Code: Select all

{ListIt2 summarytemplate='My ListIt Template'}
Then in my MOBILE Content block I put:

Code: Select all

{ListIt2 summarytemplate='My Mobile ListIt Template'}
And that did the trick! Now you just need to go into your ListIt templates and build the 2 different templates how you want them to look! Then if someone is on their iPhone, it will show your ListIt Mobile Template. It works beautifully for me!

You can do this with any module that has the ability to set the template. Now your customer never has to look at the PAGES tab, but will just go to the modules they need to update, and it will magically switch the layout based on the device!

Give it a shot! It worked great for me so I thought I would share!
Top
Post Reply

Return to “Tips and Tricks”