Verschiedene Seiten je nach Auflösung

Angespornt vom CT-Artikel „Multiples Webdesign – Webseiten mit CSS und Javascript an die Bildschirmgröße anpassen“ habe ich mich die letzten Tage mit der Implementierung dieser Idee in mein neues WP-Theme beschäftigt.

Die Funktion ist schnell eingebaut und noch schneller erklärt. Im Prinzip gibt man dem Theme im HEAD der Header.php das Standard-CSS-File mit (in meinem Fall so ausgelegt, dass es mit 1024×768 gut aussieht und mit 800×600 auch noch einigermaßen passt).

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />


Im BODY der Header.php verweist man nun auf die Javascript-Datei:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/multidesign.js"></script>

Der Inhalt der – gleich wie von CT benannten – Multidesign.js sieht folgendermaßen aus:

var stylesheet, breite;
if (window.innerWidth) {breite = window.innerWidth;} else
{breite = document.body.clientWidth;}
if (breite>=1200) {stylesheet = 'http://pfadzumstylesheet/css1280.css';}
document.writeln('<style type="text/css"><!-- @import url(' + stylesheet + '); --> </style>');

Nun kann nach Belieben designed werden. Hat z.B. ein Container bei der 1024er-(Standard-)CSS eine Breite von 770 Pixeln, kann er beim 1280er-CSS locker 1200 Pixel breit werden. Außerdem bietet sich die Möglichkeit einer zweiten Sidebar an, die in einem zusätzlichen DIV steht, dem bei der Standardauflösung die Größe 1×1 px und die Eigenschaft „visibility: hidden“ zugewiesen wird.

Aber immer daran denken: Die Standard-CSS lädt er trotzdem immer. Ich hab ewig gesucht, wo meine Sidebar hin ist, bis ich auf die Idee kam, dass ich ihr natürlich im 1280er-CSS die Eigenschaft „visibility: visible“ geben muss.

Mein Beispiel gibt es hier! (Allerdings ständig in Arbeit – kann also sein, dass es schon wieder nicht geht…)