Verschieden Möglichkeiten um Browser abhängige Veränderungen vorzunehmen

herkömmliche Variante einer Browserweiche :

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
 <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/ie7.css" />
 < ![endif]--> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
 < ![endif]-->

alternative Möglichkeit:

Eine andere Möglichkeit aber nur für den IE sind die so genannten Conditional Comments.
in diesem Fall wird keine neue CSS-Datei geladen sondern im HTML-Tag eine Klasse erzeugt.
In diesem Fall wenn der Internetexplorer älter als IE7 wird die Klasse IE6 erzeugt usw.

class="ie7">><!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]>
 <html class="ie9"> <![endif]-->
 <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> <body>
 </body> </html>

Veränderungen in der CSS erfolgt so:
Beispiel:

#wrapper{width:1000px; }
 .ie6#wrapper{width:600px;}

In PHP gibt es diese Möglichkeit:

<html class="<?php
$u=$_SERVER["HTTP_USER_AGENT"];
$p=strpos($u,"MSIE");if($p){$v=$u{$p+5};
while($v<10)echo " lt-ie".++$v;}?>:">
</html>

Für Browserweiche mobile Geräte:

Die beste Möglichkeit um Handys anzusprechen sind die Media Queries.
In den meisten Fällen reichen die drei Varianten aus:
Innerhalb der geschweiften Klammern wird die geänderte CSS-Anweisung geschrieben.

**************************************************************************************

Darstellung < 600 Pixel, iPhone und mobile Geräte
**************************************************************************************

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
 ul.meinElement li {float: none;}
 #linkeSeite, #rechteSeite {float: none;}
 }

In diesem Fall wird das Floaten der Container(Divs) verhindert.
Damit im Vorfeld die Verkleinerung der Darstellung auf dem Handy verhindert wird,
bzw. die Media Queries überhaupt greifen, muss im Head - Bereich folgendes eingefügt werden:

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

Weitere Media Queries:

**************************************************************************************

SMARTPHONE
 **************************************************************************************
 */
 @media only screen and (max-width: 700px),
 only screen and (max-device-width: 480px) {
 #wrapper{
 width: 1100px;
 }
 } /*
 **************************************************************************************
 TABLET
 **************************************************************************************
 */
 /* iPad (portrait and landscape), small screens */
 @media
 only screen and (max-width: 1024px),
 only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 #topmenu{height:auto;margin:auto; position: static; } 
 } /*

Einbindung als gesondertes Stylesheet im HTML:

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

Mehr auf der Seite von W3.org

iPad in landscape

/* iPad (portrait and landscape), small screens */
@media
only screen and (max-width: 1024px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#topmenu{height:auto;margin:auto; position: static; } 
} /*

Für alle Browser und mobile Geräte

Das JavaScript von Rafael Lima hat bei mir gute Dienste geleistet.
Es erzeugt im HTML-Tag eine Klasse, die man dann gezielt in der CSS-Datei ansprechen kann.
z.B.

#wrapper{ width: 1200px;}
 die CSS-Anweisung wird überschrieben:
 .mobile #wrapper{ width: 700px;}