HTML and CSS Reference
In-Depth Information
Sie wissen nun, dass das Aussehen einer Webseite getrennt vom HTML-Code definiert
werden kann, und haben erfahren, wie man mit ein paar CSS-Kenntnissen eine iPhone-
Seite gestalten kann. Natürlich sind wir in diesem Buch nicht die Ersten, die mit einer
Reihe von CSS-Definitionen versucht haben, Webseiten für das iPhone und andere
mobile Plattformen zu optimieren. Es gibt bereits eine ganze Reihe von vorgefertigten
CSS- und JavaScript-Frameworks, die Sie einfach herunterladen und in Ihren Projekten
verwenden können.
1.3
Erkennung von mobilen Browsern und Desktop-
Browsern
Sie haben es vielleicht schon geahnt, aber die Unterscheidung anhand der folgenden
Codezeilen, ob ein mobiles Gerät oder ein Desktop-Browser die Seite aufruft, ist relativ
unzuverlässig:
<link rel "stylesheet" type "text/css"
media "screen and (min width: 961px)" href "computer.css">
<link rel "stylesheet" type "text/css"
media "only screen and (max width: 960px)" href "mobile.css">
Diese Art der Unterscheidung war früher relevant, als Mobiltelefone noch nicht die
Bildschirmauflösungen von PC-Monitoren oder Laptops hatten, doch jetzt verschwin-
det diese Grenze immer mehr. Wir haben aber mit dem Beispiel noch etwas anderes
bezweckt: Wir wollten Ihnen zeigen, dass Inhalt und Aussehen einer Seite komplett
unabhängig voneinander gestaltet werden können und dass Sie die Möglichkeit besitzen,
einfach über CSS eine iPhone-Version Ihrer PC-Seite zu erstellen, ohne dass Sie auch
nur eine Zeile der HTML-Befehle ändern müssen.
In der Praxis würden wir von dieser Methode abraten, es sei denn, Sie haben nur eine
kleine, gut kontrollierbare Desktop-Seite. Alle größeren Webanbieter haben einen sepa-
raten Seitencode für Desktop-Webseite und Mobilseite. Dies sehen Sie allein schon daran,
dass mobile Webseiten oft sogar unter einer eigenen Domain (beispielsweise
m.spiegel.de
)
laufen.
Die meisten Webseitenanbieter verweisen automatisch auf die mobile Seite, wenn ein
iPhone-Benutzer die Desktop-Seite ansteuert. Auch wenn Sie in Ihrem iPhone
www.spiegel.de
eingeben, landen Sie wenige Augenblicke später auf
m.spiegel.de
.
Um eine derartige Logik in der eigenen Webseite zu implementieren, bedarf es der
Kenntnis des User-Agent-Headers. Neben den auf einer Webseite sichtbaren Daten wird
noch eine Reihe unsichtbarer Daten, die sogenannten HTTP-Header, ausgetauscht. Dies
passiert immer dann, wenn Sie einen Webserver, beispielsweise durch die Eingabe einer
Webadresse, von Ihrem Browser aufrufen.
Die Webseite
www.xhaus.com/headers
zeigt Ihnen, welche Informationen im HTTP-
Header übertragen werden. Testen Sie es einmal von Ihrem Telefon oder Ihrem
Desktop-Browser aus.
