So langsam muss ich mich doch mal mit dem Thema befassen und plane, meine Homepage auch für die Benutzung mit Smartphones u.Ä. anzupassen. [...] falls möglich möchte ich weiterhin auf JavaScript usw. verzichten [...]
Ohne Javascript (jQuery) wird das nicht ganz leicht, wenn auch nicht unmöglich.
Eine Seite, die einiges hergibt und auch im Quelltext eine nachzuvollziehende Logik aufweist, ist
diese (einfach mal das Browserfenster in unterschiedliche Größen "ziehen")
Ich selber mache es ein wenig konservativer und altbackener, allerdings nicht ganz ohne Javascript und jQuery.
Simples Beispiel:
[src=html5]<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body id="meineseite">
<!-- Bla Bla Inhalt -->
<script src="mein_switcher.js"></script>
</body>
</html>
[/src]
Inhalt von "mein_switcher.js":
[src=javascript]
$(document).ready(function() {
function elementResize() {
var browserWidth = $(window).width();
// Hier legst Du eine oder mehrere Fensterbreiten an (else / if) bei denen eine Klasse zu deinem BODY hinzugefügt oder entfernt wird
if ((browserWidth) < '900'){
$('#meineseite').addClass('seite_mobil');
$('#meineseite').removeClass('seite_desktop');
} else {
$('#meineseite').addClass('seite_desktop');
$('#meineseite').removeClass('seite_mobil');
}
}
elementResize();
$(window).bind("resize", function(){
elementResize();
});
});
[/src]
Fertig!
Wenn Du nun z.B. folgende Seite hast:
[src=html5]<body id="meineseite">
<div id="mein-test-div">Hallo Welt!</div>
<!-- bla bla -->
[/src]
kannst Du deine CSS-Datei z.B. wie folgt anlegen:
[src=css]#mein-test-div {
padding: 15px;
background-color: red;
color: #fff;
}
.seite_mobil #mein-test-div {
background-color: yellow;
color: #000;
padding: 30px;
[/src]
So hast Du das DIV-Element "mein-test-div" für Geräte mit einer Auflösung von mehr als 900px Bildbreite und für die mit weniger als 900px Bildbreite optimiert.
