display messages and change stylesheet through User Agent detection

[gotenks05]

I decided to make a new website for myself and have got most things setup, like CSS files and (s)html files, but I am having a problem. In the past, I was able to deliver a different stylesheet for iphone/ipod touch users to have a more easy to navigate website than it would have been if the default stylesheet was loaded. However, with this new site, I wanted to do something a bit different. I want to not only load a different stylesheet for iphone/ipod touch users but also display a message for people using a certain Operating System. So far, I have tried PHP and SSI, because I want to make sure that the message is displayed even with Javascript turned off, but it will not succeed on both at once. How can I get this to work?

here is the php script for the iphone detection:

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') == TRUE)
{
	echo("<link rel=\"stylesheet\" type=\"text/css\" href=\"iphone.css\">");
}

else
{
	echo("<link rel=\"stylesheet\" type=\"text/css\" href=\"site.css\">");
}

?>

here is my complete default stylesheet:

@media screen
{
	/* make background color black on screen display and set default font color, size, and family, as well as default text-alignment */

	body { background-color: #000000;
		color: #FFFFFF;
		font-size: 1em;
		font-family: sans-serif;
		text-align: center;
	}

	/* set container div size, background color */

	.contain { background-color: #999999;
			min-width: 720px;
			width: 90%;
			max-width: 921.6px;
			min-height: 360px;
			height: 60%;
			max-height: 460.8px;
			margin-left: 2.5%;
			padding-left: 2.5%;
			margin-right: 2.5%;
			padding-right: 2.5%;
	}

	/* set header and footer properties */

	#header, #footer { background-color: #FFFFFF;
				color: #000000;
				width: 100%;
				clear: both;
	}

	/* set content div properties */

	#main { background-color: #FFFFFF;
			color: #000000;
			width: 70%;
			height: 70%;
			float: right;
			clear: right;
			margin-bottom: 10px;
			padding-bottom: 10px;
	}

	/* set scroll div properties */

	.scroll {
			width: 60%;
			height: 15em;
			overflow: auto;
			float: left;
			clear: left;
			text-align: left;
		}

	.scroll2 {
			width: 60%;
			height: 15em;
			overflow: auto;
			float: right;
			clear: right;
			text-align: left;
		}

	.scroll3 {
			width: 60%;
			height: 5em;
			overflow: auto;
			float: left;
			clear: left;
			text-align: left;
		}

	/* set navigation properties */

	#nav { background-color: #FFFFFF;
		color: #000000;
		width: 19%;
		float: left;
		clear: left;
	}

	ul.menu { margin: 0; 
			padding: 0;
			text-align: left;
		}

	ul.menu li { margin: 0;
			padding: 0;
			list-style-type: none;
		}
	/* set classes to make things bold or italic or indent */

	.italic { font-style: italic; }
	.bold {font-weight: bold; }
	p.indent { text-indent: 3em; }

	/* image div properties */

	.image {
			float: right;
			clear: right;
			width: 30%;
			height: 30%;
		}
}

@media print
{

/* make background color black on screen display and set default font color, size, and family, as well as default text-alignment */

	body { background-color: #FFFFFF;
		color: #000000;
		font-size: 1em;
		font-family: serif;
		text-align: center;
	}

	/* heading properties */

	h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }

	/* set container div size, background color */

	.contain {
			margin-left: 2.5%;
			padding-left: 2.5%;
			margin-right: 2.5%;
			padding-right: 2.5%;
	}

	/* set header and footer properties */

	#header, #footer { 
				width: 100%;
				clear: both;
	}

	/* set content div properties */

	#main {
			width: 70%;
			float: right;
			clear: right;
			margin-bottom: 20px;
			padding-bottom: 20px;
	}

	/* set scroll div properties */

	.scroll {
			float: left;
			clear: left;
			text-align: left
		}

	.scroll2 {
			float: right;
			clear: right;
			text-align: right;
		}

	.scroll3 {
			float: left;
			clear: left;
			text-align: left;
		}

	/* set navigation properties */

	#nav { 
		width: 19%;
		float: left;
		clear: left;
		border-style: solid;
		border-width: thin;
		border-color: #000000;
	}

	ul.menu { margin: 0; 
			padding: 0;
			text-align: left;
		}

	ul.menu li { margin: 0;
			padding: 0;
			list-style-type: none;
		}
	/* set classes to make things bold or italic or indent */

	.italic { font-style: italic; }
	.bold { font-weight: bold; }
	p.indent { text-indent: 3em; }

	/* image div properties */

	.image {
			float: right;
			clear: right;
			width: 30%;
			height: 30%;
		}
}

@media handheld
{

/* make background color black on screen display and set default font color, size, and family, as well as default text-alignment */

	body { background-color: #FFFFFF;
		color: #000000;
		font-size: 1em;
		font-family: sans-serif;
		text-align: center;
	}

	/* heading properties */

	/* set container div size, background color */

	.contain {
			margin-left: 2.5%;
			padding-left: 2.5%;
			margin-right: 2.5%;
			padding-right: 2.5%;
	}

	/* set header and footer properties */

	#header, #footer { 
				width: 100%;
				clear: both;
	}

	/* set content div properties */

	#main {
			width: 70%;
			float: right;
			clear: right;
			margin-bottom: 20px;
			padding-bottom: 20px;
	}

	/* set scroll div properties */

	.scroll {
			float: left;
			clear: left;
			text-align: left
		}

	.scroll2 {
			float: right;
			clear: right;
			text-align: right;
		}

	.scroll3 {
			float: left;
			clear: left;
			text-align: left;
		}

	/* set navigation properties */

	#nav { 
		width: 19%;
		float: left;
		clear: left;
		border-style: solid;
		border-width: thin;
		border-color: #000000;
	}

	ul.menu { margin: 0; 
			padding: 0;
			text-align: left;
		}

	ul.menu li { margin: 0;
			padding: 0;
			list-style-type: none;
		}
	/* set classes to make things bold or italic or indent */

	.italic { font-style: italic; }
	.bold { font-weight: bold; }
	p.indent { text-indent: 3em; }

	/* image div properties */

	.image {
			float: right;
			clear: right;
			width: 30%;
			height: 30%;
		}
}

here is the stylesheet for the iphone/ipod touch:

/* make background color black on screen display and set default font color, size, and family, as well as default text-alignment */

	body { background-color: #FFFFFF;
		color: #000000;
		font-size: 1em;
		font-family: sans-serif;
		text-align: center;
	}

	/* heading properties */

	/* set container div size, background color */

	.contain {
			margin-left: 2.5%;
			padding-left: 2.5%;
			margin-right: 2.5%;
			padding-right: 2.5%;
	}

	/* set header and footer properties */

	#header, #footer { 
				width: 100%;
				clear: both;
	}

	/* set content div properties */

	#main {
			width: 70%;
			float: right;
			clear: right;
			margin-bottom: 20px;
			padding-bottom: 20px;
	}

	/* set scroll div properties */

	.scroll {
			float: left;
			clear: left;
			text-align: left
		}

	.scroll2 {
			float: right;
			clear: right;
			text-align: right;
		}

	.scroll3 {
			float: left;
			clear: left;
			text-align: left;
		}

	/* set navigation properties */

	#nav { 
		width: 19%;
		float: left;
		clear: left;
		border-style: solid;
		border-width: thin;
		border-color: #000000;
	}

	ul.menu { margin: 0; 
			padding: 0;
			text-align: left;
		}

	ul.menu li { margin: 0;
			padding: 0;
			list-style-type: none;
		}
	/* set classes to make things bold or italic or indent */

	.italic { font-style: italic; }
	.bold { font-weight: bold; }
	p.indent { text-indent: 3em; }

	/* image div properties */

	.image {
			float: right;
			clear: right;
			width: 30%;
			height: 30%;
		}

here is the code to be used as the site's navigation (with a minor difference than the original for security reasons):

<ul class="menu"> <!-- start unordered list -->
<li>Main<ul> <!-- create category -->
<li>Home</li>
<li>Contact</li>
<li>FAQ</li>
<li>ABout</li>
</ul>
</li>
<li>Info<ul> <!-- create category -->
<li>Current project</li>
<li>Books</li>
<li>Podcasts</li>
<li>Sites</li>
</ul>
</li>
<li>Stores<ul> <!-- create category -->
<li>Lulu storefront</li>
</ul>
</li>
<li>Misc.<ul> <!-- create category -->
<li>Programs</li>
</ul>
</li>
</ul> <!-- close unordered list -->

Yes, I know it is just a list right now. I wanted to get this stuff to work before turning that text into links.

here is an html code template of how my site will look:

<html>
<head>
<title>
Web page title
</title>
<?php
include("detect.php");
?>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/updates.xml">
</head>

<body>

<!-- the following conditional statement checks the User agent for an operating system and return a message if the condition is met -->
<!--#if expr="(${HTTP_USER_AGENT} = /Windows NT 6.0/)" -->
<h1>You are running the Vista virus. Be careful, because you will not get very much support.</h1>

<!--#else -->
<!--#endif -->
<div class="contain"> <!-- opening container div -->
<div id="header"> <!-- open header div -->
<h2>Website name</h2>
</div> <!-- close header div -->

<div id="nav"> <!-- open navigation div -->
<!--#include file="menu.html" -->
</div> <!-- close navigation div -->

<div id="main"> <!-- open content div -->
<div class="scroll3"><p>Welcome.</p></div>

<div class="scroll"> <!-- create scrolling area -->
<h3>Updates</h3>
</div> <!-- close scrolling area -->
</div> <!-- close content div -->

<div id="footer"> <!-- open footer div -->
<p>Copyright © 2009 Name</p>
</div> <!-- close footer div -->
</div> <!-- close container div -->
</body>
</html>

As shown in the code, I want to display a message to a user using Windows Vista, hence it is in the body. Another SSI is used to load the navigation from a separate HTML file, to update navigation links quickly. And in the header, it is calling a PHP script that is to check for an iPhone user agent and loads the correct css file by using the echo command to place it in the right place in the HTML file.

 

[angelwatt]

Can you elaborate on what part isn't working? Some notes, SSI generally needs to be setup to work on specific extensions e.g., .shtml, .html, etc. Also, you should be able to do everything from PHP so it's probably better to not use SSI with PHP.

Here's a tip for putting HTML out on a page. I reworked your first code block. This way will keep you from having to escape quotes.

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') == TRUE)
{?>
  <link rel="stylesheet" type="text/css" href="iphone.css">
<?php}

else
{?>
  <link rel="stylesheet" type="text/css" href="site.css">
<?php}
?>

 

[gotenks05]

Can you elaborate on what part isn't working? Some notes, SSI generally needs to be setup to work on specific extensions e.g., .shtml, .html, etc. Also, you should be able to do everything from PHP so it's probably better to not use SSI with PHP.

Here's a tip for putting HTML out on a page. I reworked your first code block. This way will keep you from having to escape quotes.

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') == TRUE)
{?>
  <link rel="stylesheet" type="text/css" href="iphone.css">
<?php}

else
{?>
  <link rel="stylesheet" type="text/css" href="site.css">
<?php}
?>

It looks like you beat me. What was not working was the server-side code. The right CSS did not load and the message was not displayed. For example, I got error directives instead of what I wanted to see, whether the user agent was changed to Windows NT 6.0 or not. In the CSS problem, when changing to the iPhone user agent in my browser, I got the default instead of the specialized iPhone stylesheet. That was all when trying to get both conditional statements working. My server is setup for both PHP and SSI, so no worries there.

After a bit of trial and error, I got it resolved and it does not look too much different, from when I tried all SSI for the user agents instead of both PHP and SSI. Thanks for the reply. I'll keep your post in mind though the next time I try to do this.